我有一個代碼,讓我產生在現有的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 ... 任何想法?提前致謝。
非常感謝,你救了我! –