Question

我有一个表格设计，我在多个表格中使用。会有一些颜色差异，但它们是根据类别确定的。例如：

<table id="table" class="table1"> and <table id="table" class="table2">

我想将javascript条带应用于奇数行;但是，希望它能够在ID为table的所有表上工作，因为在某些页面上会有多个具有相同ID的表（只是不同的类）。

我看过这段代码，

 $(document).ready(function(){ 
 $("#table tr:odd").addClass("odd");
 });

但它似乎只适用于第一张桌子并在此之后停止。前几天我看到了一个有用的代码;但是，现在我似乎无法找到它。有关javascript代码的任何建议可以跨多个表工作，分别从每个表中获取奇数行并将类应用于这些行？

如果我没有正确说出这个，请告诉我，我会尽力纠正。而且我没有使用CSS nth-child来做这个，因为CSS nth-child在IE中不起作用（至少我没能让它工作）。我需要这个网站甚至在旧浏览器中工作，这就是为什么我要回到JS。我还需要JS在所有浏览器中工作。

Answer 1

如果您使用ID选择器#<whatever>，那么它将只返回匹配的第一个元素。您可以使用$("table tr:odd")或提出一个类来指定所有表格，表明它应该具有替代行颜色，例如$(".table-striped tr:odd")

<强>替代方案

这些示例将适用于多个表并保持着色顺序相同

$('.table-striped').each(function () {
    $('tr:odd', this).addClass('odd');
});

$(".table-striped tr:nth-child(odd)").addClass("odd");

Answer 2

更改： -

$("#table tr:odd").addClass("odd");

到

$("table tr:odd").addClass("odd");

您也可以尝试： -

$(document).ready(function() {
    $("table").find("TR:odd").addClass("odd");
});

在第一个解决方案中，原始选择器将获取页面中表格中包含的所有tr元素的一组，然后获取该巨大集合中的所有其他元素。后者首先创建一组所有表，然后创建每个表中的行的子组，然后获取每个子组中的每一个行。

Answer 3

“嗯，你在这种方法中有一个根本的缺陷，因为id值在页面上必须是唯一的。所以你真的不应该使id属性成为常见的”事物“基于脚本。

好消息是您可以跳过使用ID并根据标签本身进行操作。。。 $("table tr:odd").addClass("odd");会将该类应用于页面上每个<table>元素的奇数行。

Answer 4

你的ID和类混淆了

<table id="table" class="table1">

应该是

<table id="table1" class="table">

和

<table id="table" class="table2">

应该是

<table id="table2" class="table">

你的JS应该是：

 $(document).ready(function(){ 
     $(".table tr:odd").addClass("odd");
 });

ID应该是唯一的并且只应用一次，它用于标识特定元素。因此名称为“ID”。

一个类用于查找多个元素。

Answer 5

我们可以使用bootstrap。将类表条带添加到表中。

请记住包括必要的引导程序文件。