Question

我有一个代码，允许我在现有的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>

test.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);      
            }
        }     
    });
}

我试图在另一个函数中设置我的td的css：

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

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

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

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

Answer 1

td元素实际上并不在th个元素中。您要做的是在td个（{8}）中找到th个元素，然后设置它们的背景颜色。这不起作用。

您需要做的是在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>

Answer 2

</div>之后应显示</thead>。虽然这是无关紧要的，因为div不能成为表的直接子项。您还有th个代码作为th代码的直接子代。这些都是无效的HTML标记。

$('#8').find("td").css("backgroundColor", "yellow");无效，因为#8是th的ID。 .find函数选择父元素内的元素。因此，使用该jQuery，您在td元素中寻找th元素，在您的情况下将不会选择任何内容。

JS / JQUERY：改变生成的tr的css

2 个答案: