javascript - JS/J查询 : Change css of generated tr's td-6ren

javascript - JS/J查询 : Change css of generated tr's td

转载作者：太空宇宙更新时间：2023-11-03 22:39:31

我有一个代码可以让我在现有的 html 表中生成 td。这是 HTML :

<html>
<head>
<link rel="stylesheet" href="gentabl.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
</head>
<!--<form method="POST" action="InsertRes.php">-->
    <body>
        <?php include 'formInsertRes.php' ?>
        <button onclick="rdv()">Show more comments</button>
        <table id="calendar">
            <div class="header"> 
            <thead>
                <tr>
                    <th onclick="prev()"><</th>
                    <th id="my" colspan="29"></th>
                    <th onclick="next()">></th>
                </tr>
            </div>
                <tr>
                    <th>HORAIRES</th>
                    <th id="0" colspan="5">LUNDI</th>
                    <th id="1" colspan="5">MARDI</th>
                    <th id="2" colspan="5">MERCREDI</th>
                    <th id="3" colspan="5">JEUDI</th>
                    <th id="4" colspan="5">VENDREDI</th>
                    <th id="5" colspan="5">SAMEDI</th>
                </tr>
                <tr>
                    <th></th>
                    <th id="lun1">1</th><th id="lun2">2</th><th id="lun3">3</th><th id="lun4">4</th><th id="lun5">5</th>
                    <th id="mar1">1</th><th id="mar2">2</th><th id="mar3">3</th><th id="mar4">4</th><th id="mar5">5</th>
                    <th id="mer1">1</th><th id="mer2">2</th><th id="mer3">3</th><th id="mer4">4</th><th id="mer5">5</th>
                    <th id="jeu1">1</th><th id="jeu2">2</th><th id="jeu3">3</th><th id="jeu4">4</th><th id="jeu5">5</th>
                    <th id="ven1">1</th><th id="ven2">2</th><th id="ven3">3</th><th id="ven4">4</th><th id="ven5">5</th>
                    <th id="sam1">1</th><th id="sam2">2</th><th id="sam3">3</th><th id="sam4">4</th><th id="sam5">5</th>
                </tr>
            </thead>
            <tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="8">8h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="9">9h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="10">10h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="11">11h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="12">12h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="13">13h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="14">14h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="15">15h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="16">16h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="17">17h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="18">18h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="19">19h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="20">20h</th></tr></tbody>
            </tbody>
        </table>
        <script src="test.js"></script>
    </body>
</form>
</html>

测试.js :

function tableCreate(){  
    $(".t").each(function () { //for each tbody avec nom de classe "t"
        $(this).find('tr').each (function() { //find l'unique tr écrit en dur dans le html
            for(var o = 0; o<30; o++){ //boucle qui insert des cellules dans le tr
                var td = document.createElement("td");
                td.appendChild(document.createTextNode(""));
                this.appendChild(td);  
            } 
        });
        for(var p = 0; p<11;p++){ //boucle qui insert 11 nouvelles lignes à la suite de la précedente
            var tr = this.insertRow();
            for(var l = 1; l<31; l++){ //boucle qui insert des cellules dans les lignes nouvellement créer
                var td = document.createElement("td"); 
                td.appendChild(document.createTextNode("")); 
                tr.appendChild(td);      
            }
        }     
    });
}

我正在尝试在另一个类似的函数中设置我的 th 的 td 的 css:

$('#8').find("td").css("backgroundColor", "yellow");

但是，它不起作用。我试图只设置我的 th css 以查看它是否是语法错误，但它在没有生成元素的情况下工作正常

$('#8').css("backgroundColor", "yellow"); //works

可能是一样的problem这里。我尝试了他们的解决方案，但仍然无法设置 css ...有任何想法吗？提前致谢。

最佳答案

td 元素实际上并不在 th 元素中。您要做的是在 th 元素(id 为 8)中找到 td 元素，然后设置这些元素的背景颜色。这行不通。

您需要做的是在 th 的父级中查找它们。将您的 jQuery 更改为以下内容:

$('#8').parent().find('td').css("backgroundColor", "yellow");

您的代码(已编辑):

function tableCreate(){  
    $(".t").each(function () { //for each tbody avec nom de classe "t"
        $(this).find('tr').each (function() { //find l'unique tr écrit en dur dans le html
            for(var o = 0; o<30; o++){ //boucle qui insert des cellules dans le tr
                var td = document.createElement("td");
                td.appendChild(document.createTextNode(""));
                this.appendChild(td);  
            } 
        });
        for(var p = 0; p<11;p++){ //boucle qui insert 11 nouvelles lignes à la suite de la précedente
            var tr = this.insertRow();
            for(var l = 1; l<31; l++){ //boucle qui insert des cellules dans les lignes nouvellement créer
                var td = document.createElement("td"); 
                td.appendChild(document.createTextNode("")); 
                tr.appendChild(td);      
            }
        }     
    });
}

tableCreate();

$('#8').parent().find('td').css("backgroundColor", "yellow");

<html>
<head>
<link rel="stylesheet" href="gentabl.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
</head>
<!--<form method="POST" action="InsertRes.php">-->
    <body>
        <?php include 'formInsertRes.php' ?>
        <button onclick="rdv()">Show more comments</button>
        <table id="calendar">
            <div class="header"> 
            <thead>
                <tr>
                    <th onclick="prev()"><</th>
                    <th id="my" colspan="29"></th>
                    <th onclick="next()">></th>
                </tr>
            </div>
                <tr>
                    <th>HORAIRES</th>
                    <th id="0" colspan="5">LUNDI</th>
                    <th id="1" colspan="5">MARDI</th>
                    <th id="2" colspan="5">MERCREDI</th>
                    <th id="3" colspan="5">JEUDI</th>
                    <th id="4" colspan="5">VENDREDI</th>
                    <th id="5" colspan="5">SAMEDI</th>
                </tr>
                <tr>
                    <th></th>
                    <th id="lun1">1</th><th id="lun2">2</th><th id="lun3">3</th><th id="lun4">4</th><th id="lun5">5</th>
                    <th id="mar1">1</th><th id="mar2">2</th><th id="mar3">3</th><th id="mar4">4</th><th id="mar5">5</th>
                    <th id="mer1">1</th><th id="mer2">2</th><th id="mer3">3</th><th id="mer4">4</th><th id="mer5">5</th>
                    <th id="jeu1">1</th><th id="jeu2">2</th><th id="jeu3">3</th><th id="jeu4">4</th><th id="jeu5">5</th>
                    <th id="ven1">1</th><th id="ven2">2</th><th id="ven3">3</th><th id="ven4">4</th><th id="ven5">5</th>
                    <th id="sam1">1</th><th id="sam2">2</th><th id="sam3">3</th><th id="sam4">4</th><th id="sam5">5</th>
                </tr>
            </thead>
            <tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="8">8h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="9">9h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="10">10h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="11">11h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="12">12h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="13">13h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="14">14h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="15">15h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="16">16h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="17">17h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="18">18h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="19">19h</th></tr></tbody>
                <tbody class="t"><tr class="h"><th rowspan="12" id="20">20h</th></tr></tbody>
            </tbody>
        </table>
        <script src="test.js"></script>
    </body>
</form>
</html>

关于javascript - JS/J查询 : Change css of generated tr's td，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44616422/

文章推荐： c# - 停止模拟 IFormFile 创建 FileCopy

文章推荐：使用 Azure 调试 Node.js

文章推荐： c# - 通过脚本找对撞机

文章推荐： javascript - 显示表单字段的 Bootstrap-slider

Mysql 查询 JOIN 查询
我有三张 table 。表 A 有选项名称(即颜色、尺寸)。表 B 有选项值名称(即蓝色、红色、黑色等)。表C通过将选项名称id和选项名称值id放在一起来建立关系。我的查询需要显示值和选项的名称，而
查询
在mysql中，如何计算一行中的非空单元格？我只想计算某些列之间的单元格，比如第 3-10 列之间的单元格。不是所有的列...同样，仅在该行中。最佳答案如果你想这样做，只能在 sql 中使用名称而
sql - 查询、 native 查询、命名查询和类型化查询之间的区别
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
elasticsearch - 在Elasticsearch查询中没有为[查询]注册的[查询]
我正在为版本7.6进行Elasticsearch查询我的查询是这样的: { "query": { "bool": { "should": [ {
sql - 查询、 native 查询、命名查询和类型化查询之间的区别
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
php - Mysql WHERE NOT EXISTS(查询)OR(查询)
是否可以编写一个查询来检查任一子查询(而不是一个子查询)是否正确？ SELECT * FROM employees e WHERE NOT EXISTS (
javascript - 查询。为表中的每一行发送 ajax 查询
我找到了很多关于我的问题的答案，但问题没有解决我有表格，有数据，例如: Data 1 Data 2 Data 3
salesforce - SOQL 查询 - 如何通过将字段设为小写并进行比较来编写 SOQL 查询？
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
salesforce - SOQL 查询 - 如何通过将字段设为小写并进行比较来编写 SOQL 查询？
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
Android SQLite 查询(我想解析一般的 SQL 查询)
我从 EditText 中获取了 String 值。以及提交查询的按钮。 String sql=editQuery.getText().toString();// SELECT * FROM empl
mysql 查询 - 为一个巨大的表优化现有的 MAX-MIN 查询
我有一个或多或少有效的查询(关于结果)，但处理大约需要 45 秒。这对于在 GUI 中呈现数据来说肯定太长了。所以我的需求是找到一个更快/更高效的查询(几毫秒左右会很好)我的数据表大约有 3000
SQL 查询 - 将 NULL 结果添加到 SELECT 查询
这是我第一次使用 Stack Overflow，所以我希望我以正确的方式提出这个问题。我有 2 个 SQL 查询，我正在尝试比较和识别缺失值，尽管我无法将 NULL 字段添加到第二个查询中以识别缺失
sql - 什么是动态 SQL 查询？何时需要使用动态 SQL 查询？
什么是动态 SQL 查询？何时需要使用动态 SQL 查询？我使用的是 SQL Server 2005。最佳答案这里有几篇文章: Introduction to Dynamic SQL Dynami
php - 在另一个 mysql 查询 while 循环中调用 mysql 查询
include "mysql.php"; $query= "SELECT ID,name,displayname,established,summary,searchlink,im
java - MySQL 查询 "select top 5"查询
我有一个查询要“转换”为 mysql。这是查询: select top 5 * from (select id, firstName, lastName, sum(fileSize) as To
c# - Entity Framework 查询 ToString 不会产生 SQL 查询
通过我的研究，我发现至少从 EF 4.1 开始，EF 查询上的 .ToString() 方法将返回要运行的 SQL。事实上，这对我来说非常有用，使用 Entity Framework 5 和 6。但
MySQL 查询(或 Doctrine 1.2 查询)- 从连接表和过滤器中获取最新项目
我在构造查询来执行以下操作时遇到问题: 按activity_type_id过滤联系人，仅显示最近事件具有所需activity_type_id或为NULL(无事件)的联系人表格结构如下: 一个联系人可
php - 如何在执行另一个 SQL 查询 x 分钟后执行一个 SQL 查询？
如何让我输入数据库的信息在输入数据 5 分钟后自行更新？假设我有一张 table : +--+--+-----+ |id|ip|count| +--+--+-----+ |
database - 如何在 N1QL 查询(Couchbase 查询)中使用 LENGTH() 字符串函数
我正在尝试搜索正好是 4 位数字的 ID，我知道我需要使用 LENGTH() 字符串函数，但找不到如何使用它的示例。我正在尝试以下(和其他变体)但它们不起作用。 SELECT max(car_id)
php - 将 SQL 查询 (+JOIN) 转换为 Symfony Propel 查询
我有一个在 mysql 上运行良好的 sql 查询(查询 + 连接): select sum(pa.price) from user u , purchase pu , pack pa where (

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - JS/J查询 : Change css of generated tr's td