Question

我一直在尝试使这个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'。

非常感谢你的帮助。 更新：如何解决此问题 在定义Tables的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>

如果您觉得它有用，请尝试一下，如果它不起作用，那可能是我不知道的其他事情。但在我的情况下，这很好。

Answer 1

使用jQuery：

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

Answer 2

我将通过说明你可以让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';
}

Answer 3

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

Answer 4

我不习惯提供一个纯粹的JavaScript解决方案，因为我很确定我会搞砸它，每个人都有自己喜欢的框架。相反，这是它背后的基本逻辑：

等待DomReady事件
查找作为表的所有元素，并使用类alternatecolors。
查找这些表中的所有偶数行
遍历行，并将类alternatecolor添加到它们。

Answer 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;
}

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

5 个答案: