在jQuery中添加表行

我使用jQuery向表中添加一行作为最后一行。

我是这样做的：

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

您可以向这样的表中添加的内容（例如输入、选择、行数）是否有限制？有不同的方法吗？

当前回答

<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');

2013-12-21 11:54:45

其他回答

我知道您要求使用jQuery方法。我看了很多，发现我们可以通过下面的函数以比直接使用JavaScript更好的方式来实现。

tableObject.insertRow(index)

index是一个整数，指定要插入的行的位置（从0开始）。也可以使用-1的值；这导致新行将被插入最后的位置。

此参数在Firefox和Opera中是必需的，但在Internet Explorer、Chrome和Safari中是可选的。

如果省略此参数，insertRow（）将在Internet Explorer中的最后一个位置以及Chrome和Safari中的第一个位置插入新行。

它将适用于HTML表的所有可接受结构。

以下示例将在last中插入一行（-1用作索引）：

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

我希望这有帮助。

2012-04-20 17:38:43

所以，自从@Luke Bennett回答这个问题后，情况就发生了变化。这里有一个更新。

jQuery自1.4版（？）起自动检测您试图插入的元素（使用append（）、prepend（）、before（）或after（）方法中的任何一种）是否是<tr>，并将其插入到表中的第一个<tbody>中，如果不存在，则将其包装到新的<tbody中。

因此，是的，您的示例代码是可以接受的，并且可以与jQuery1.4+一起工作。；）

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

2012-06-05 20:12:48

<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');

2013-12-21 11:54:45

在这里，您只需单击按钮，即可获得输出。单击“添加行”按钮，然后添加一行。

我希望这很有帮助。

<html> 

<head> 
    <script src= 
            "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 

    <style> 
        table { 
            margin: 25px 0; 
            width: 200px; 
        } 

        table th, table td { 
            padding: 10px; 
            text-align: center; 
        } 

        table, th, td { 
            border: 1px solid; 
        } 
    </style> 
</head> 

<body> 

    <b>Add table row in jQuery</b> 

    <p> 
        Click on the button below to 
        add a row to the table 
    </p> 

    <button class="add-row"> 
        Add row 
    </button> 

    <table> 
        <thead> 
            <tr> 
                <th>Rows</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>This is row 0</td> 
            </tr> 
        </tbody> 
    </table> 

    <!-- Script to add table row -->
    <script> 
        let rowno = 1; 
        $(document).ready(function () { 
            $(".add-row").click(function () { 
                rows = "<tr><td>This is row " 
                    + rowno + "</td></tr>"; 
                tableBody = $("table tbody"); 
                tableBody.append(rows); 
                rowno++; 
            }); 
        }); 
    </script> 
</body> 
</html>

2020-01-29 11:04:32

我尝试过最受欢迎的一种，但它对我不起作用，但下面的效果很好。

$('#mytable tr').last().after('<tr><td></td></tr>');

即使那里有一个雪橇，它也会起作用。

2020-09-06 12:39:44

在jQuery中添加表行

推荐文章

最新文章

标签