在jQuery中添加表行

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

我是这样做的：

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

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

当前回答

    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);

2015-12-06 04:13:14

其他回答

也可以这样做：

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

2017-03-30 07:24:13

使用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

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

一小条

$（'#tab'）.append（$（'<tr>'）追加（$（'<td>'）追加（“text1”））追加（$（'<td>'）追加（“text2”））追加（$（'<td>'）追加（“text3”））追加（$（'<td>'）追加（“text4”））)<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><table id=“tab”><tr><th>名字</th><th>姓氏</th>年龄</th><th>城市</th></tr><tr><td>吉尔</td><td>史密斯</td><td>50个</td><td>纽约</td></tr></table>

2017-10-12 17:54:33

对于此处发布的最佳解决方案，如果最后一行上有一个嵌套表，则新行将添加到嵌套表而不是主表。快速解决方案（考虑带/不带tbody的表和带嵌套表的表）：

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

用法示例：

add_new_row('#myTable','<tr><td>my new row</td></tr>');

2011-01-21 22:21:43

我知道您要求使用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中添加表行

推荐文章

最新文章

标签