在jQuery中添加表行

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

我是这样做的：

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

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

当前回答

也可以这样做：

$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")

2017-03-30 07:24:13

其他回答

如果要在＜tr＞第一个子项之前添加行。

$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");

如果要在＜tr＞最后一个子项之后添加行。

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

2017-03-16 09:07:45

jQuery有一个内置的工具，可以随时操作DOM元素。

您可以像这样向表中添加任何内容：

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

jQuery中的$（“＜some tag＞”）是一个标记对象，它可以有几个可以设置和获取的attr属性，以及文本，它表示标记之间的文本：＜tag＞text＜/tag＞。

这是一些非常奇怪的缩进，但您更容易看到这个示例中的情况。

2009-08-14 15:30:37

var html = $('#myTableBody').html();
html += '<tr><td>my data</td><td>more data</td></tr>';
$('#myTableBody').html(html);

$('#myTableBody').html($('#myTableBody').html() + '<tr><td>my data</td><td>more data</td></tr>');

2022-01-25 14:02:02

我知道您要求使用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

使用jQuery.append（）使用jQuery.appendTo（）使用jQuery.after（）使用Javascript.insertRow（）使用jQuery-添加html行

试试看：

//使用jQuery-append$（'#myTable>tbody'）.append（'<tr><td>3</td><td>Smith-Patel</td></tr>'）；//使用jQuery-appendTo$（'<tr><td>4</td><td>J.Thomson</td></tr>'）.appendTo（“#myTable>tbody”）；//使用jQuery-添加html行让tBodyHtml=$（'#myTable>tbody'）.html（）；tBodyHtml+='<tr><td>5</td><td>Patel S.</td></tr>'；$（'#myTable>tbody'）.html（tBodyHtml）；//使用jQuery-after$（'#myTable>tbody-tr:last'）.之后（'<tr><td>6</td><td>天使布鲁ice</td></tr>'）；//使用JavaScript-insertRowconst tableBody=document.getElementById（'myTable'）.getElementsByTagName（'tbody'）[0]；const newRow=tableBody.insertRow（tableBody.rows.length）；newRow.innerHTML='<tr><td>7</td><td>K。Ashwin</td></tr>'；<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><table id=“myTable”><thead><tr><th>Id</th><th>名称</th></tr></thead><tbody><tr><td>1个</td><td>约翰·史密斯</td></tr><tr><td>2个</td><td>汤姆·亚当</td></tr></tbody></table>

2022-04-20 05:12:51

在jQuery中添加表行

推荐文章

最新文章

标签