Question

在向表中添加新行后，我无法弄清楚如何维护表格条纹。如果我将.insertAfter()选择器更改为#names tr:last，则它会按预期工作，但是使用tr:first或tr:nth-child(x)会导致新行，并且下面的所有行都会被条带化。在Chrome的开发者工具中查看更新的DOM时，一切看起来都很正常。我希望有人可以向我解释为什么这不起作用。我觉得我必须遗漏一些基本的东西。这是代码：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .striped {
                background-color: #silver;
            }
        </style>

        <script type="text/javascript" src="jquery-1.4.3.js"></script>
        <script type="text/javascript">
            function stripes () {
                $("tr:even").each(function () {
                    $(this).addClass("striped");
                });
            }

            $(function () {
                stripes();
                $("#addRow").click(function () {
                    $("<tr><td>Kenny</td><td>Bania</td></tr>").insertAfter("#names tr:first");
                    stripes();
                });
            });
        </script>
    </head>
    <body>
        <div>
            <a href="#" id="addRow">Add Row</a>
            <table>
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                </thead>
                <tbody id="names">
                    <tr>
                        <td>Jerry</td>
                        <td>Seinfeld</td>
                    </tr>
                    <tr>
                        <td>Elaine</td>
                        <td>Benes</td>
                    </tr>
                    <tr>
                        <td>George</td>
                        <td>Costanza</td>
                    </tr>
                    <tr>
                        <td>Cosmo</td>
                        <td>Kramer</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

谢谢！

Answer 1

您需要先删除 .striped 类。

function stripes () {
            $("tr").each(function () {
                $(this).removeClass("striped");
            });
            $("tr:even").each(function () {
                $(this).addClass("striped");
            });
        }

如何在动态添加新行后应用jQuery表条带？

1 个答案: