javascript - 奇数/偶数表分条 - 单个页面上的多个表格

我有一个表格设计，我正在跨多个表格使用。会有一些颜色差异，但它们是根据类别确定的。 ex：javascript - 奇数/偶数表分条 - 单个页面上的多个表格

<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的第n个孩子在IE中不起作用（至少我还没有得到它的工作）。即使在旧版浏览器中，我也需要该网站才能运行，这就是为什么我要回到JS。我还需要JS在所有浏览器中工作。

来源

2013-07-05 kdjernigan

ID是唯一的。通过id获取元素将只返回第一个元素。您需要改为使用类。 – kalley

我修改了这个来添加这个类，但是它并没有单独为每个表开始计数。我不需要它从剩下的点继续计数.http：//jsbin.com/ucadiq/2（我需要表2到第一个）---代码可以在这里找到：http：///jsbin.com/ucadiq/2/edit – kdjernigan

更改此设置： -

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

到

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

你也可以试试这个： -

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

JS FIDDLE

在第一解决方案的原始选择将采取一切有关表格中包含的TR元素的组页面，然后采取所有其他巨大的一套。后面的一个首先创建一组所有表，然后创建每个表内的行的子组，然后每个子组中的每行都有一个。

来源

2013-07-05 17:42:23

第二个解决方案是完美的。我确实有一个问题，看起来你已经告诉它找到TR：odd;然而，它发现第2和第4行（其数量是偶数）。我对JavaScript有点新，并且有点好奇，为什么它找到了这些行而不是第1和第3行。这可能是一个愚蠢的问题 – kdjernigan

这是因为它在选择器返回的行上使用基于0的数组。所以，第一行是数组的“0”元素。。。 0，尽管是数组中的第一个元素（即，技术上“奇数”），但被标记为“偶数”。 – talemyn

@talemyn +1很好解释。但是，您是否有任何包含此内容的文档链接？我无法在JQUERY API DOCUMENTATION中找到它。谢谢:) –

如果您使用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");

来源

2013-07-05 17:41:52

因此ID只能分配给第一次出现，但类可以分配给同一页上的多次出现？我只是要求澄清，以便我知道将来的编码 – kdjernigan

是的。您应该只将ID分配给单个元素，它唯一标识该元素。每当你试图识别多个元素时，就应该使用一个类 –

我修改了这个来添加这个类，但是它并没有单独为每个表开始计数。我不需要它从剩下的点继续计数.http：//jsbin.com/ucadiq/2（我需要表2看起来与第一个相同）---代码在这里可用： http://jsbin.com/ucadiq/2/edit – kdjernigan

“好了，你有这种做法的根本缺陷，在id值必须在页面上独一无二的。所以，你真的不应该让id属性常见的‘一事一议’基于脚本。

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

来源

2013-07-05 17:43:57 talemyn

我修改了这个来添加类，但是它并没有单独为每个表开始计数。我不需要它从剩下的点继续计数.http：//jsbin.com/ucadiq/2（我需要表2看起来与第一个相同）---代码在这里可用： http://jsbin.com/ucadiq/2/edit – kdjernigan

heh。。。是的，这是我用于解决方案的JQuery的一个有趣的（我无意识的）副作用。选择器从所有表中获取所有行并过滤来自该组的“奇数”行。通过使用'$（“table”）。find（“tr：odd”）。addClass（“odd”）;'Vivek包含的解决方案，您首先选择所有表，然后遍历每个表并获取该表的所有行，并筛选“奇数”表。显然，这对你所需要的并不有用，而是一个好的“行为”提示，以备日后需要时使用。 :) – talemyn

你得到的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'。

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

来源

2013-07-05 17:46:56 Timber

javascript - 奇数/偶数表分条 - 单个页面上的多个表格

回答

相关问题