修改

Question

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

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

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

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

Answer 1

将您的选择器（tr:even或tr:odd）更改为.CLASSNAME tr:even和.CLASSNAME tr:odd - 然后将CLASSNAME添加到您想要条纹的包含表格中。< / p>

Answer 2

你应该忘记使用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>

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

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

修改

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

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

Answer 3

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

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

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

Answer 4

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

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

然后调整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>

我个人建议使用CSS属性

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

仅将脚本应用于特定表

4 个答案:

修改