2014-10-02 256 views
0

我使用AdminLTE模板(引導),我想改變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"); 
    } 
}); 

但不工作..

我真的定義^ h elp :(

非常感謝! (對不起,如果我的英語不好,我是法語:)))

回答

1

您正在選擇的父母元素是一個標籤,而不是tr。使用closest找到TR,該複選框是英寸

$("table tbody").on("change", "input[type='checkbox']", function() { 
    $(this).closest("tr").toggleClass("info", this.checked); 
}); 
+0

問題是比AdminLTE編輯我的分區..

baptiste 2014-10-02 17:11:40

+1

爲什麼你一直在每個人的答案發布?這是一個無法理解的評論。 – epascarello 2014-10-02 17:12:17

1

Js Fiddle

在這裏你給類.infolabel這是<input>

$chk.parent().addClass("info"); 

你需要找父母確切的父母<tr>添加類

$chk.parents('tr').addClass("info"); 
+0

希望頁面沒有嵌套表格。 – epascarello 2014-10-02 17:10:55

+0

Admin LTE編輯我的分區..

baptiste 2014-10-02 17:11:15