jQuery为特定表格交替设置行颜色

Question

我有两个表格：<table id='1'></table> 和 <table id='2'></table>。当我输入以下代码时：

$(document).ready(function()
{
  //for table row
  $("tr:even").css("background-color", "#F4F4F8");
  $("tr:odd").css("background-color", "#EFF1F1");

});

两个表格都有交替的行颜色，我不想要这样，我只想给id为2的表格上色。如何实现？

- tarique

Answer 1

修改你的代码如下：

$(document).ready(function()
{
  $("table#id2 tr:even").css("background-color", "#F4F4F8");
  $("table#id2 tr:odd").css("background-color", "#EFF1F1");
});

这假定你有一个表，它的id设置为id2，例如：

<table id="id2">

- Sarfraz

---

在HTML中不允许使用那样的ID，而且IE也无法识别它。 - nickf

在选择器中使用元素选择器和ID选择器是对选择器引擎（以及CSS的浏览器）的额外负担 - 元素应仅针对类名进行指定，例如“＃id1 tr.myCoolEvenClass”。 （在上面的示例中，“＃id1”已经指向表格，因此无需说“查看所有表格并查找＃id1”） - Dan Heberden

@nickf：是的，我知道，但我只是在扩展他的例子，尽管我应该建议不要使用纯数字作为ID。谢谢。 - Sarfraz

Answer 2

首先，不允许使用数字作为 id 的开头。请将表格的 id 改成类似这样的格式：

<table id="table1"></table>

然后，你只需要将正确的选择器添加到你的jQuery中：

$("#table2 tr:even").css(...);
$("#table2 tr:odd").css(...);

- nickf

Answer 3

Pass your table Id as parameter:


settingTableRowColor('tableid');

var settingTableRowColor = function(tableName){
    $('#'+tableName+' tr:odd').attr('class','odd');
    $('#'+tableName+' tr:even').attr('class','even');
}

- frangly

---

类型错误：settingTableRowColor不是一个函数，你必须先声明该函数。 - JuanFernandoz

Answer 4

$("#tab1 tr:odd").css('background-color', 'red'); 

也可以工作

- Mohammed mansoor