在jQuery中添加表行

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

我是这样做的：

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

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

当前回答

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

我遇到了一些相关的问题，试图在单击的行之后插入一个表行。除了.after（）调用对最后一行不起作用之外，一切都很好。

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

我想出了一个非常不整洁的解决方案：

按如下方式创建表（每行的id）：

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

等

然后：

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

2009-10-05 19:17:01

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

这是一些hacketi黑客代码。我想在HTML页面中维护一个行模板。表行0…n是在请求时呈现的，这个示例有一个硬编码行和一个简化的模板行。模板表是隐藏的，行标记必须在有效表中，否则浏览器可能会将其从DOM树中删除。添加行使用计数器+1标识符，当前值保持在数据属性中。它保证每一行都有唯一的URL参数。

我已经在Internet Explorer 8、Internet Explorer 9、Firefox、Chrome、Opera、诺基亚Lumia 800、诺基亚C7（带Symbian 3）、Android股票和Firefox测试版浏览器上运行了测试。

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PS：我把所有学分都给了jQuery团队；他们值得拥有一切。没有jQuery的JavaScript编程——我甚至不想去想那个噩梦。

2013-03-28 21:51:47

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

使用javascript函数编写

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

2016-01-19 20:09:33

在jQuery中添加表行

推荐文章

最新文章

标签