使用jQuery动态地为表中的替代行添加Bgcolor

Question

我创建了程序，使用“添加行”按钮将行添加到表中。 每行都作为新行添加到表中。 我想为奇数行和偶数行添加不同的背景颜色 。 我正在使用jQuery添加背景，但我的代码中有一点错误。 我的意思是我可以在行中添加背景颜色，但显示不正确。

这是jQuery代码：

<script>
    $(document).ready(function() {
        var id = 0;

        // Add button functionality
        $("#addrow").click(function() {
            id++;

            if(id%2==0){
                $(".prototype td").css("background-color","#eee");
            }else{
                $(".prototype td").css("background-color","#ddd");
            }

            var master = $(this).parents("table.stdform");

            // Get a new row based on the prototype row
            var prot = master.find(".prototype").clone();

            master.find(".fancyTable tbody").append(prot);

        });
    });
</script>

这是html代码：

<html>
<head>
    <title></title>
</head>
<body>
    <table width="100%" cellpadding="0" cellspacing="0" border="0"
    class="stdform">
        ..other codes...
        <tr><td>
        <table class="fancyTable" id="sortable-table"
                cellpadding="0" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <td>header one</td>
                        <td>header two</td>
                        <td>header three</td>
                    </tr>
                </thead>
                <tbody id="job-tbody">
                    <tr class="prototype">
                        <td>one</td>
                        <td>two</td>
                        <td>three</td>
                    </tr>
                </tody>
        </table>
        </td></tr>
    </table>
</body>
</html>

谢谢，..

Answer 1

您可以使用css样式表执行此操作，也可以使用jquery执行此操作：

http://api.jquery.com/odd-selector/

从jquery站点获取代码：

<table border="1">
  <tr><td>Row with Index #0</td></tr>
  <tr><td>Row with Index #1</td></tr>
  <tr><td>Row with Index #2</td></tr>
  <tr><td>Row with Index #3</td></tr>
</table>

<script>
    $( "tr:odd" ).css( "background-color", "#bbbbff" );
</script>

注意html如何不受任何css样式的影响，以及jquery如何在一行中完成工作。 如果你想访问偶数颜色，总会有“tr：even”选择器。

http://api.jquery.com/even-selector/

另外一个问题 （仅当您不使用回发刷新表并想要实时刷新时）

添加新行时可能会遇到另外一个问题。 你的jquery.ready函数会在你的页面准备好后执行一次。 因为你通常在dom上有jquery代码$( "tr:odd" ){...}来准备处理你已经拥有的html表元素，所以css样式只会影响那些行，而不是任何行之后添加的新行。

您可以采用捷径，并添加用于jquery.ready函数的相同代码，并将其应用于您的点击处理程序（如果您的用户有很多要添加且表格很大，则可能会受到性能影响），或者您可以跟踪表格的最后一行，计算它是奇数或偶数，并在添加新行时应用css样式。

我会计算表中有多少项目的运行计数，并使用该数字作为您要添加的新行的决定因素。

Answer 2

你可以使用Jquery Odd 甚至 selecter，

试试这段代码：

DEMO

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