jquery突出顯示和不突出顯示錶行

我有一個多行顯示錶，每個奇數行設置一個陰影等級，甚至略有不同的陰影，因此每行都更易於閱讀。jquery突出顯示和不突出顯示錶行

單擊事件後，我將突出顯示具有不同顏色的行，以便您知道哪個記錄已被選中，但是當單擊不同的行時，我不確定如何將顏色恢復爲原始狀態。

相反，我是我所做的待辦事項是欺騙？！並將所有行重新設置爲備用灰色，然後將新的高亮顏色應用於所選行。

我想知道是否有更好的方法來做到這一點。

$(document).on("click","#div2 tr#abc", function(event) { 

    barcode = $(this).data('barcode'); 

    $('tr:odd[id="abc"]').css('backgroundColor', '#FAFAFA'); 
    $('tr:even[id="abc"]').css('backgroundColor', '#F2F2F2'); 

    $(this).css('backgroundColor','#FFD6F5'); 

});

來源

2015-05-06 Skydiver1977

您正在使用多個元素'abc'相同的ID。 Id應該是唯一的。 – Tushar

您每次都重新分配所有行的顏色，這不是一件好事，只需在加載表時執行一次 – smnbbrv

試試這個，

CSS類對行簡單的切換會做你的工作。

$(document).on("click","tr", function(event) { 
 

 
    $('tr').removeClass('active'); 
 
    $(this).addClass('active'); 
 

 
});

tr:nth-child(even) {background: #F2F2F2} 
 
tr:nth-child(odd) {background: #FAFAFA} 
 

 

 
td{ width:200px; height:20px;border:1px solid black;} 
 

 

 
tr.active{background:#FFD6F5};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     </td> 
 
    <td> 
 
     </td> 
 
    
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     </td> 
 
    <td> 
 
     </td> 
 
    
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     </td> 
 
    <td> 
 
     </td> 
 
    
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     </td> 
 
    <td> 
 
     </td> 
 
    
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     </td> 
 
    <td> 
 
     </td> 
 
    
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     </td> 
 
    <td> 
 
     </td> 
 
    
 
    </tr> 
 
    </table>

來源

2015-05-06 09:08:17 Puneet

我建議你用CSS類，而不是使用css()功能工作：

CSS

.highlight { background-color:yellow }

jQuery的

在行點擊，從所有的行刪除highlight類，然後將此類添加到所點擊的行中：

$('#yourTable tr').on('click', function() { 
    $('#yourTable tr').removeClass('highlight'); 
    $(this).addClass('highlight'); 
});

來源

2015-05-06 09:02:03 kapantzak

當您可以使用類時，不要設置樣式。

在你的CSS：

.selected { 
    background-color: #FFD6F5 
}

在您的JS：

$(document).on("click","#div2 tr", function(event) { 
    $('tr').removeClass('selected'); 
    $(this).addClass('selected'); 
});

來源

2015-05-06 09:02:33

一種方法是用類的工作環境的CSS，而不是直接屬性：

CSS（訂單子句意義重大;請參閱Rory McCrossan的答案如何以不同方式處理基線着色）：

個

.color-even { background-color: #F2F2F2; } 
.color-odd { background-color: #FAFAFA; } 
.color-hilite { background-color: #FFD6F5; }

JS：

$(document).ready(function() { 
    //... 
    $('tr:even').addClass('color-even'); 
    $('tr:odd').addClass('color-odd'); 
    //... 
}); 

//... 

$(document).on("click","#div2 tr", function(event) { 
    barcode = $(this).data('barcode'); 

    $('.color-hilite').removeClass('color-hilite'); 
    $(this).addClass('color-hilite'); 
});

如果允許多行的選擇，移動「removeClass」方法在你的代碼，你處理個人或所有行的取消選擇的地方。

jsFiddle (live demo)

NB（id屬性）

在點擊處理程序的選擇你 'ABC' 的id合格tr元素。鑑於你的問題，這是沒有道理的，因爲你會挑出一個特定的行來附加你的處理程序。也許你在不同的行上重複使用相同的id值？這違反了ID的目的，而是使用類。您可以在單個class屬性中堆積儘可能多的類（用空格分隔;處理沒有便利的代碼變得稍微麻煩，但是您仍然使用jquery）。

來源

2015-05-06 09:06:02 collapsar

jquery突出顯示和不突出顯示錶行

回答

相關問題