選中復選框時更改顏色表
[英]Change color table when checkbox ticked
問題描述
我正在使用AdminLTE模板（Bootstrap），當我的復選框被打勾時，我想更改tr的顏色
<table id="example1" class="table table-bordered table-striped dataTable" aria-describedby="example1_info">
<thead>
<tr role="row">
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 295px;">
ID
</th>
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 295px;">
ID
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 430px;">
Sujet
</th>
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 295px;">
Nom du client
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending" style="width: 384px;">
Département
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 250px;">
Status
</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending" style="width: 183px;">
Derniére reponse
</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="1" colspan="1">
ID
</th>
<th rowspan="1" colspan="1">
ID
</th>
<th rowspan="1" colspan="1">
Sujet
</th>
<th rowspan="1" colspan="1">
Client
</th>
<th rowspan="1" colspan="1">
Département
</th>
<th rowspan="1" colspan="1">
Statut
</th>
<th rowspan="1" colspan="1">
Derniere reponse
</th>
</tr>
</tfoot>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
12
</td>
<td class=" ">
Pb SQL
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-success">
SQL
</small>
</td>
<td class=" ">
<small class="label label-success">
Ouvert
</small>
</td>
<td class=" ">
30/09/2014 à 12h24
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
18
</td>
<td class=" ">
Pb FTP
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-danger">
Technique
</small>
</td>
<td class=" ">
<small class="label label-success">
Ouvert
</small>
</td>
<td class=" ">
30/09/2014 à 12h21
</td>
</tr>
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
19
</td>
<td class=" ">
Quels sont vos DNS ?
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-danger">
Technique
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
30/09/2014 à 10h13
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
22
</td>
<td class=" ">
Facture #123456789
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-info">
Commercial
</small>
</td>
<td class=" ">
<small class="label label-danger">
En attente Tech Niveau II
</small>
</td>
<td class=" ">
30/09/2014 à 07h34
</td>
</tr>
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
123
</td>
<td class=" ">
Paiement reçu ?
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-info">
Commercial
</small>
</td>
<td class=" ">
<small class="label label-primary">
En attente paiement
</small>
</td>
<td class=" ">
29/09/2014 à 23h45
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
90
</td>
<td class=" ">
Pb renouvellement
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-info">
Commercial
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
29/09/2014 à 21h13
</td>
</tr>
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
193
</td>
<td class=" ">
Un gay dans l'equipe ?
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-default">
Pour Nico
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
29/09/2014 à 15h14
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
3045
</td>
<td class=" ">
Detail offre pro
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-primary">
Pré-vente
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
29/09/2014 à 13h37
</td>
</tr>
<tr class="odd">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
4567
</td>
<td class=" ">
Quel modes de paiement autorisez vous ?
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-info">
Commercial
</small>
</td>
<td class=" ">
<small class="label label-primary">
Attente serivce commercial
</small>
</td>
<td class=" ">
29/09/2014 à 10h54
</td>
</tr>
<tr class="even">
<td class=" ">
<div class="checkbox"> <label> <input type="checkbox" /></label></div>
</td>
<td class=" sorting_1">
6789
</td>
<td class=" ">
Paiement non abouti
</td>
<td class=" ">
Relou
</td>
<td class=" ">
<small class="label label-danger">
Technique
</small>
</td>
<td class=" ">
<small class="label label-warning">
Reponse client
</small>
</td>
<td class=" ">
29/09/2014 à 00h01
</td>
</tr>
</tbody>
</table>
我想使用JS，但我不知道該怎么做:(
試過這個
$("input[type=checkbox]").on("change", function() {
var $chk = $(this);
var isChecked = $chk.prop('checked');
if (isChecked) {
$chk.parent().addClass("info");
}
else {
$chk.parent().removeClass("info");
}
});
但不起作用..
我真的需要幫助:(
非常感謝 ！ （對不起，如果我的英語不好，我是法語：））））
2 個解決方案
解決方案1
1 2014-10-02 17:03:52
您正在選擇作為標簽而不是tr的父元素。 使用closest來查找復選框所在的tr。
$("table tbody").on("change", "input[type='checkbox']", function() {
$(this).closest("tr").toggleClass("info", this.checked);
});
解決方案2
1 2014-10-02 17:06:31
在這里，您給.info類提供label ，該label是<input>父級
$chk.parent().addClass("info");
您需要找到確切的父<tr>來添加類
$chk.parents('tr').addClass("info");
JavaScript - 勾選復選框時更改 ul 以顯示的函數
[英]JavaScript - Function to change ul to display when checkbox is ticked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.