选中复选框时更改颜色表
[英]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.