Thay đổi tr background-color

Question

Tôi có một cái gì đó như thế này:

<tr id='<%=currentRow %>' onclick="SetBackgroundColor(this)" style="background-color:Yellow"> 

Khi tôi bấm vào liên tiếp tôi muốn thay đổi màu nền của nó và tôi đã làm như thế này:

function SetBackgroundColor(rowId) 
{ 
    $(rowId).css("background-color", "#000000"); 
} 

nhưng tôi don không biết tại sao nó không hoạt động. Bất kỳ đề nghị xin vui lòng?

Answer 1

IE có một vấn đề với màu nền cho các phần tử TR. Một cách an toàn hơn là để thiết lập nền cho TD và TH của bên trong TR:

<table id="tabletest"> 
    <tr> 
     <td>testcell</td> 
    </tr> 
</table> 

<script> 
$('#tabletest tr').bind('click', function(e) { 
    $(e.currentTarget).children('td, th').css('background-color','#000'); 
}) 
</script> 

Added: bạn có thể gán một xử lý sự kiện duy nhất cho toàn bộ bảng để tăng hiệu suất:

$('#tabletest').bind('click', function(e) { 
    $(e.target).closest('tr').children('td,th').css('background-color','#000'); 
}); 

Answer 2

Trong jQuery bạn không phải sử dụng thuộc tính onclick để gán một trình xử lý sự kiện. Giả sử bạn thêm một lớp được gọi là mytr vào mỗi tr mà bạn muốn tác động. Sau đó, bạn có thể làm điều gì đó như sau:

$(document).ready(function(){ 
     $(".mytr").click(function(){ 
      $(this).css("background-color", "#000000"); 
     }); 
}); 

Và điều đó sẽ áp dụng trình xử lý sự kiện cho tất cả các hàng với lớp mytr.

Answer 3

Thay vì thay đổi màu nền của hàng trong bảng, hãy thử thay đổi màu nền ô của bảng.

$(document).ready(function() { 
    $(".mytr td").click(function() { 
     $(this).css("background-color", "#000000"); 
    }); 
}); 

Answer 4

Một giải pháp đơn giản hơn là có thể sử dụng bộ chọn cho tất cả các hàng trong bảng hoặc addClass.

Ví dụ

$("#myTable tr").click(function() { 
    $(this).css('background-color', '#f00'); 
}); 

hoặc

$("#myTable tr").click(function() { 
    $(this).addClass('selected'); 
}); 

Answer 5

chí này thiết lập lại mỗi hàng khi nhấp chuột vào một cái mới ...

$(document).ready(function(){ 

    $('tr').click(function(){ 
    $('tr td').css({ 'background-color' : 'green'}); 
    $('td', this).css({ 'background-color' : 'red' }); 
    }); 

}); 

demo: http://jsbin.com/aciqi/

Answer 6

Cảm ơn bạn all..the vấn đề là trong masterpage tôi đã tải j query-1.3.2.min.jsbeforequery-1.3.2-vsdoc.js và đó là cách nó không working..thanks lại

Answer 7

$('#RowID').children('td, th').css('background-color','yellow');