1. 程式人生 > >如何單擊某行使其顏色變化並且在單擊其他行後顏色恢復

如何單擊某行使其顏色變化並且在單擊其他行後顏色恢復

思路:

給table的每一行(tr)來一個樣式。然後再通過js來修改單擊的那一行的顏色(將之前的元素儲存,然後再點選另一行時進行修改恢復以及改變單擊行)。

如:

css:

tr{
background-color: blue;
}

js:

var cur;
$("tr").click(function(){
cur ? $(cur).css("background-color","#d9f4ff"): '';
    $(this).css("background-color","#ffefd7");
    cur = this;
});

var cur;
var tr = $("tr");
for (var i = 0; i < tr.length; i++) {
   tr[i].onclick = function() {
       cur ? cur.style.backgroundColor = '#d9f4ff': '';
       this.style.backgroundColor = "#ffefd7";
       cur = this;
   }
}