1

I have a code that allows me to generate td in a existing html table. This is the 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);      
            }
        }     
    });
}

I am trying to set css of my th's td in another function like that : 

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

However, it doesn't work. I have tried to just set my th css to see if it was a syntax error but it works fine with none generated elements

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

It may be the same problem here. I tried their solutions but still can't set css ... Any ideas ? Thanks in advance.

Canette De Fanta
  • 45
  • 1
  • 1
  • 6

2 Answers2

3

The td elements are not actually inside the th ones. What you're trying to do is finding td elements inside th ones (with id 8) and then setting the background color of those. This doesn't work.

What you need to do is to look for them inside the parent of th instead. Change your jQuery to the following:

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

Your code (edited):

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>
Gustaf Gunér
  • 2,272
  • 4
  • 17
  • 23
1

Your </div> should appear after your </thead>. Although this is irrelevant because a div can't be a direct child of a table. You also have th tags as direct children of th tags. These are both invalid HTML markup.

$('#8').find("td").css("backgroundColor", "yellow"); won't work because #8 is the ID of the th. The .find function select elements inside of a parent. So with that jQuery you are looking for a td element inside of a th element, which will select nothing in your case.

WizardCoder
  • 3,353
  • 9
  • 20