在點擊時添加css類將不適用於所有行 - 引導表

Question

我添加了一個css類，它應該是當前點擊的行的顏色， ，我意識到它每秒鐘都在工作，第一行 排它不會工作，在第二排它會工作等等，我不明白爲什麼會發生這種情況？

我還必須說，我在我的視圖上使用引導表，並且錶行是動態創建的，但它們都應該是相同的。

這裏是添加後行我表的外觀：

我發現默認的行是顏色不同，這表怎麼引導的作品我猜

這是什麼當我選擇第二行發生了，它看起來像這樣：

但是，當我點擊第1行和第3行時，即使我可以看到當我正在檢查頁面，該類應用於我選擇的行時，也沒有發生任何事情。

我的JS：

$('#TableItems').on('click', 'tr', function (e) { 
    $(this).addClass('lol').siblings().removeClass('lol'); 
}); 

我的CSS：

.lol 
{ 
    background: gray; 
} 

Answer 1

Working fiddle。

您可以將該類附加到td，而是使CSS更具體的規則覆蓋已應用的規則。

CSS：

#TableItems>tbody>tr>td.lol 
{ 
    background-color: gray; 
} 

JS：

$('#TableItems').on('click', 'tr', function (e) { 
    $('td',this).addClass('lol'); 
    $(this).siblings().find('td').removeClass('lol'); 
}); 

希望這有助於。

$('#TableItems').on('click', 'td', function (e) { 
 
    $('td').siblings().addClass('lol'); 
 
    $(this).closest('tr').siblings().find('td').removeClass('lol'); 
 
    
 
    console.log($(this).prop('id')); 
 
});

#TableItems>tbody>tr>td.lol 
 
{ 
 
    background-color: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div class="row"> 
 
<div class="col-md-12"> 
 
    <table id="TableItems" class="table table-striped table-bordered table-hover dataTable"> 
 
    <tr> 
 
     <th>A</th> 
 
     <th>B</th> 
 
     <th>C</th> 
 
     <th>D</th> 
 
     <th>E</th> 
 
    </tr> 
 
    <tr> 
 
     <td id="id_1">test id 1</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td id="id_2">test id 2</td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
</div>

Answer 2

如果絕對有使用!important規則來覆蓋任何當前應用的樣式，例如在引導.table-striped類。考慮創建一個執行專用樣式函數的類的列表，並對其進行適當命名，以確保它完全明瞭它們的作用。

下面的示例已將.lol類更名爲.greyBackground_OVERRIDE這表示您已覆蓋元素上存在的任何先前值。

請注意，如果您不記錄使用!Important rule的位置，它可能會導致嚴重的樣式問題。

$('#TableItems').on('click', 'tr', function(e) { 
 
    $(this).addClass('greyBackground_OVERRIDE').siblings().removeClass('greyBackground_OVERRIDE'); 
 
});

/* 
 
    I recommend using the _OVERRIDE naming convention for these type of classes 
 
*/ 
 
.greyBackground_OVERRIDE 
 
{ 
 
    /* 
 
    makes use of the !important rule which gives this style preference over any others. 
 
    */ 
 
    background: grey !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<table class="table table-striped" id="TableItems"> 
 
    <thead> 
 
    <tr> 
 
     <th> test </th> 
 
     <th> test 2 </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 1 </td> 
 
     <td> 2 </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 3 </td> 
 
     <td> 4 </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 5 </td> 
 
     <td> 6 </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 7 </td> 
 
     <td> 8 </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 9 </td> 
 
     <td> 10 </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

JS應該是：

 $('#TableItems').on('click', 'tr', function (e) { 
      $(this).parent().find('tr').removeClass('lol'); 
      $(this).addClass('lol'); 
     });