如何创建自动生成的备用表格行颜色？答案

【问题标题】：How can I create an automatically generated alteranate table row color?如何创建自动生成的备用表格行颜色？
【发布时间】：2011-02-05 07:52:55
【问题描述】：

我一直在努力使这段 CSS 代码工作：

table.mytable {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0.8em;
    border-collapse: collapse;
}
table.mytable td, table.mytable th { 
    width: auto;
    padding: 2px 4px;
    vertical-align: top;
}
table.mytable th {
    color: #fff;
    background:url(images/header-bg.gif);
    text-align: left;
}
table.mytable tr.alternateColor {
    background-color:#E9F3FC;
}

好吧，如果我手动编写它，它可以工作。但是由于表格将通过 asp.NET (Aspx) 生成，这不是手动创建的 - 我希望我的表格生成备用行。我一直在尝试使用 Javascript 来完成这项工作，但我无法弄清楚，我相信这是一个很好的资源网站。

我一直在使用 Adobe Dreamweaver cs4 的手动表格作为测试，但我必须放置“alternatecolors”类才能使其出现，我无法正常这样做。：

问题是，有人可以为我提供一个很好的 Javascript，我可以将它放在文件的标题中，并真正帮助我完成这项工作吗？我觉得我被烧死了……或者由于我花费的时间太长，我无法快速看到其他人看到的东西。

我刚刚尝试在此处发布我的表格代码，但我无法正确格式化它，我必须运行......

我没有在这个表上使用“id”，但类是“mytable”。

非常感谢您的帮助。 更新：如何解决这个问题 在定义表格的 CSS 文件中，我必须添加这两行（当然还有更多行来定义一个好的表格）..但这两条很重要

table.alternate td.odd { background-color:#fff}
table.alternate td.even { background-color:#e6e6e6; }

然后，我在 html 中添加了这些行，就在绘制表格之前。这是一个 Jquery 的东西，可以激活表的奇偶属性

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
  $("table.alternate tr:even td").addClass("even");
  $("table.alternate tr:odd td").addClass("odd");
});
</script>

如果您觉得它有帮助，请尝试一下，如果它不起作用，那可能是我不知道的其他问题。但这对我来说效果很好。

【问题讨论】：

标签： javascript html css colors html-table

【解决方案1】：

使用 jQuery：

$('.mytable tr:odd').addClass('alternateColor');

【讨论】：

也许在选择器中的“表”中折腾？ $('table.mytable tr:odd')?

【解决方案2】：

使用AlternatingItemTemplate。无需在客户端使用 jQuery 对其进行调整。

【讨论】：

取决于他如何生成表格。

【解决方案3】：

我不太愿意提供纯 javascript 解决方案，因为我很确定我会把它搞砸，而且每个人都有自己喜欢的框架。相反，这是它背后的基本逻辑：

等待 DomReady 事件
查找所有属于表格的元素，并具有alternatecolors 类。
在这些表中查找所有偶数行
循环遍历各行，并将alternatecolor 类添加到其中。

【讨论】：

【解决方案4】：

我会在前面说你可以让 ASP.NET 的表格控件为你处理交替颜色，这就是你应该做的！除非您在 JavaScript 中构建表客户端，否则不要为此使用 JavaScript。

有关使用 ASP.NET 的表控件设置交替行的信息，请参阅此链接： http://authors.aspalliance.com/aspxtreme/aspnet/syntax/htmltablecontrol.aspx

也就是说，如果您可以在项目中包含 jQuery，这将变得非常简单：

// Fires when the DOM is ready for us to interact with
$(document).ready(function() {
    // Apply class "alternateColor" to every other <tr> element in the table
    $('table.mytable tr:odd').addClass('alternateColor');
}

vanilla JavsScript 中的等效代码有点像噩梦，因为 JavaScript 无法按类选择元素。

var table, tbody, rows, arr, i

// Get all our tables, and find the one with our class selector
arr = getElementsByTagName('table');
for (i = 0; i < arr.length; ++i) {
    if (arr[i].className == 'mytable') {
        // we've found the table;
        table = arr[i];
        break;
    }
}

// get the table's rows, by way of the table's body element
tbody = table.getElementsByTagName("tbody")[0];
rows  = tbody.getElementsByTagName("tr");

// apply our class to every other row in the table
for (i = 0; i < rows.length; i += 2) {
    rows[i].className += ' alternateColor';
}

【讨论】：

感谢您的帮助。因为我只是使用 Adobe Dreamweaver 而不是 Visual Studio 来设计这个项目——而且我实际上对它了解不多，所以我正在使用我所知道的东西，即 xhtml、css、javascript，我会给出这个.NET 编码器的模板，以便它可以集成到 Visual Studio 和工作中。在这个项目中处理这两个软件平台有点困难，但我认为 VS 是为设计师创造的最丑陋的东西。现在，我将与 .NET 讨论这件事，因为这会减少我的大量工作时间。我稍后会回来看看其他答案。谢谢~！
重要的是您应该在生成表格的任何地方生成交替标记。除非您在客户端构建表，否则不要将其推送到客户端。

【解决方案5】：

You can do this with just CSS3. 在 IE 中无法使用，但在 FF 3.5+、Safari 3.1+、Opera 9.5+ 和 Chrome 2.0+ 中可以使用。

table.mytable tr:nth-of-type(even)
{
    background-color:#E9F3FC;
}

【讨论】：