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

标签 javascript jquery html css

我有一个代码可以让我在现有的 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/

上一篇：javascript - 显示表单字段的 Bootstrap-slider

下一篇：javascript - 在 Sidenav 菜单中创建子菜单(ASP.NET MVC)

相关文章：

javascript - KineticJS:从圆上的 'click' 事件获取鼠标按钮、x 和 y

javascript - 定位到行中的最后一里？

jquery - 以正确的纵横比在 django View 中渲染图像

html - 为容器中剩余的空间展开子元素高度

html - Bootstrap 颜色范围格式

javascript - 如何防止 PHP sleep 函数停止我的 HTML 页面

javascript - 从 HTML 中获取带有适当空格的文本

javascript - 在js中将字符串从货币格式转换为 float

javascript - 用 JS 去掉多余的 br 标签

html - 如何将忘记链接放入输入密码框中？

©2024 IT工具网  联系我们