2009-11-30 42 views
15

我有这样的事情:更改TR背景色

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

当我点击一排我想改变它的背景色,我不喜欢这样的:

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

但我不不知道为什么它不起作用。有什么建议吗?

+0

做任何事情发生吗?尝试使用Firebug或一些“警告”行来缩小,如果点击事件甚至发射,传递给函数等等。 – 2009-11-30 17:35:38

+0

您也可以创建一个CSS类,并将该类应用到您的TR与JavaScript。 – Roch 2009-11-30 17:37:47

+0

查看连续点击演示http://jsbin.com/ufihi3 – Pool 2009-11-30 17:38:51

回答

30

IE具有背景颜色TR元件的问题。一个更安全的方法是设定背景为TD的和TH的的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> 

新增:您可以分配一个单独的事件处理程序,整个表,以提高性能:

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

在jQuery中,您不必使用onclick属性来分配事件处理程序。假设你为每个想要影响的tr添加一个名为mytr的类。然后你可以做这样的事情:

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

而且这将适用于类mytr的所有行的事件处理程序。

+0

什么也没有发生..我用萤火虫看..它跳到哪里它有...但没有什么..仍然黄色排 – user158625 2009-11-30 18:05:48

+0

你是否修改这个,所以它使用正确的选择器? – Kezzer 2009-12-01 08:22:25

0

而不是更改表格行背景颜色,请尝试更改表格单元格背景颜色。

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

一个更简单的解决方案是可能对表或addClass中的所有行使用选择器。

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

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

这将当点击一个新的重置每行...

$(document).ready(function(){ 

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

}); 

演示:http://jsbin.com/aciqi/

0

谢谢all..the的问题是,在母版我是装的第j query-1.3.2.min.jsbeforequery-1.3.2-vsdoc.js,这就是方式,它不是working..thanks再次

+0

请选择一个答案,以便我们知道你有一个解决方案。 – Mottie 2009-12-01 04:03:27

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