在選中時更改td的背景顏色

Question

我該怎么做呢？ 我有一個checkbox ，當您單擊/選中完整的td列時，它將具有背景色。 然后，如果未選中，它將刪除其背景色。 同樣，如果已經選中並且用戶選中了另一個checkbox ，則選中的復選框將具有背景色，而前一個checkbox將沒有背景色。

的jsfiddle

Answer 1

您應該只將col標簽添加到HTML表中。 然后，您可以設置col的背景色，並使列中的所有TD都變為彩色：

 function ChangeColColor(chkCol,col) { var varCol = document.getElementById(col); var varColor = "White"; if (chkCol.checked == true) { varColor = "Red"; } varCol.style.backgroundColor = varColor; } 

 <table> <colgroup> <col id="colA"> <col id="colB"> <col id="colC"> </colgroup> <tr> <td>Column A <input id="chkColA" type="checkbox" onclick="ChangeColColor(this,'colA')"/></td> <td>Column B <input id="chkColB" type="checkbox" onclick="ChangeColColor(this,'colB')"/></td> <td>Column C <input id="chkColC" type="checkbox" onclick="ChangeColColor(this,'colC')"/></td> </tr> <tr> <td>Data A:1</td> <td>Data B:1</td> <td>Data C:1</td> </tr> <tr> <td>Data A:2</td> <td>Data B:2</td> <td>Data C:2</td> </tr> <tr> <td>Data A:3</td> <td>Data B:3</td> <td>Data C:3</td> </tr> </table> 

Answer 2

嘗試如下

 $('input:checkbox').click(function() { $(this).parent().addClass('green') $('input:checkbox').not(this).prop('checked', false).parent().removeClass('green'); }); 

 .green { background-color: green; width: 50px; height: 50px; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table width="200" border="1"> <tbody> <tr> <td><input type="checkbox" /></td> <td><input type="checkbox" /></td> <td><input type="checkbox" /></td> <td><input type="checkbox" /></td> <td><input type="checkbox" /></td> </tr> </tbody> </table>