仅将脚本应用于特定表

The following script helps to make html tables to have rows of alternating colors:

以下脚本有助于使html表具有交替颜色的行:

<script type = "text/javascript">
$(document).ready(function () {
    $("tr:even").css("background-color", "#e8eef4");
});
$(document).ready(function () {
    $("tr:odd").css("background-color", "#fff");
});
</script>

It works ok, but the problem is that it applies this rule to all tables in its scope, and I'd like it to be applied to several tables only.

它工作正常,但问题是它将此规则应用于其范围内的所有表,并且我希望它仅应用于多个表。

How I could apply such a script to specific tables only?

我如何才能将这样的脚本应用于特定的表?

4 个解决方案

#1

Change your selector (tr:even or tr:odd) to .CLASSNAME tr:even and .CLASSNAME tr:odd - then add CLASSNAME to your containing tables where you want the stripes.

将您的选择器(tr:even或tr:odd)更改为.CLASSNAME tr:even和.CLASSNAME tr:odd - 然后将CLASSNAME添加到您想要条带的包含表中。

#2

You should forget about using javascript and just use CSS

你应该忘记使用javascript并只使用CSS

<style>
    .myTable tr:nth-child(even) { background-color: #c5c5c5;  }
    .myTable tr:nth-child(odd) { background-color: #fff;}
</style>

<table class="myTable">
    <tr>
        <td>asdf</td>
    </tr>
    <tr>
        <td>asdf</td>
    </tr>
    <tr>
        <td>asdf</td>
    </tr>
    <tr>
        <td>asdf</td>
    </tr>
</table>

Here's a fiddle
http://jsfiddle.net/ZxvpX/1/

这是一个小提琴http://jsfiddle.net/ZxvpX/1/

This will increase performance and reduce overhead simply because it doesn't require any additional libraries for such a menial task.

这将提高性能并减少开销,因为它不需要任何额外的库来完成这样的琐碎任务。

EDIT

as pointed out this doesn't work in IE. So you will need to load up the jQuery plugin to fix IE's broken system.

正如所指出的,这在IE中不起作用。所以你需要加载jQuery插件来修复IE的破坏系统。

<RANT>  
    COME ON ALREADY MICROSOFT!!! WE ALL KNOW YOUR DEVELOPERS 
    READ THESE QUESTIONS ON * AND FULLY UNDERSTAND
    THE FRUSTRATION BEING EXPRESSED ON A DAILY BASIS. 
    GET WITH THE PROGRAM ALREADY!
</RANT>

#3

You can narrow the selector and combine your code, like this:

您可以缩小选择器并合并代码,如下所示:

$(document).ready(function () {
  $(".selector tr:even").css("background-color", "#e8eef4");
  $(".selector tr:odd").css("background-color", "#fff");
});

.selector is an example, but whatever your can identify those tables on will work, or if this is part of an AJAX request, use $("tr:even", context) instead.

.selector是一个示例,但无论您能识别哪些表都可以工作,或者如果这是AJAX请求的一部分,请改用$(“tr:even”,context)。

#4

Set table classes for the tables you want it applied to such as

为要应用的表设置表类,例如

<table class="even-odd"/>
   <tr></tr>
   <tr></tr>
</table>

Then Adjust your jQuery selectors to select all tables with the appropriate class and the descendant tr of that table only.

然后调整jQuery选择器以选择具有相应类的所有表以及该表的后代tr。

<script type = "text/javascript">
$(document).ready(function () {
    $("table.even-odd tr:even").css("background-color", "#e8eef4");
});
$(document).ready(function () {
    $("table.even-odd tr:even").css("background-color", "#fff");
});
</script>

I would personally just suggest using CSS properties

我个人只是建议使用CSS属性

table.even-odd tr:nth-child(even) { background-color: #e8eef4;  }
table.even-odd tr:nth-child(odd) { background-color: #fff;}