Question

我正在我的一个网页上的表格中显示数据。当用户点击一行时，我希望该行只能改变颜色。我会满足于那个细胞。我在页面上引用了一个css文件，其中包含两种样式：td_on和td_off，除了背景颜色外，它们具有相同的设置。我把“class”标签放在td中就像这样：

<td align="center" class="td_off" >

我尝试使用onclick操作将类更改为td_on样式，如此，onclick =“class = td_on”但这不会导致任何更改。有人可以告诉我这样做的正确语法是什么......或者更简单的方法来完成???！提前谢谢。

Answer 1

使用jQuery很容易做到这一点，这里是改变表格单元格颜色：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {

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


    });
</script>

如果您想更改整行的颜色，请将$(this).css('background-color','red');更改为$(this).parent().css('background-color','red');。

Answer 2

试试这个：

<td align="center" onclick="switchClass(this);" class="td_off" >

<script>
function switchClass(td)
{
  if(td.className == 'td_off')
  {
    td.className = 'td_on';
  }
  else
  {
    td.className = 'td_off';
  }
}
</script>

使用css和javascript仅更改特定的表内容颜色

2 个答案: