2017-06-18 51 views
0

我有一個代碼,讓我產生在現有的HTML表TD。 這是HTML:JS/JQUERY:產生TR的TD的變化CSS

<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 ... 任何想法?提前致謝。

回答

2

td元素實際上不是th的人裏面。你想要做的是在th的內部找到td元素(ID爲8),然後設置它們的背景顏色。這不起作用。

你需要做的是尋找他們的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>

+0

非常感謝,你救了我! –

0

爲什麼你單TBODY使用多個TBODY。

+0

這不是一個答案,這應該是一個評論。 –

1

</div>應該出現在</thead>後。雖然這不相關,因爲div不能作爲桌子的直接子。您還有th標籤作爲th標籤的直接子女。這些都是無效的HTML標記。

$('#8').find("td").css("backgroundColor", "yellow");將不起作用,因爲#8th的ID。 .find函數選擇父級內的元素。所以對於那個jQuery,你正在尋找th元素中的td元素,它不會在你的情況下選擇任何東西。