在表格第一行上方添加新行

问题描述 投票:0回答:8

我有一个有 12 列的表格。每列都有一个文本框。

When I click on an 'Add' button, a new row should be inserted above the first row of the table
。我该怎么做呢?比如说,如果我使用 jquery append(),它只会在末尾添加行,但我想在第一行的顶部添加。

javascript jquery dom
8个回答
6
投票

尝试

$("#tableId tbody").prepend("<tr>..</tr>");

3
投票

Vanilla JavaScript 中,它真的很简单:

var firstRow = yourTable.rows[0];
firstRow.parentNode.insertBefore(newRow,firstRow);

3
投票

您可以使用以下替代方案

1) .before() 查看文档 单击此处
2) .insertBefore() 查看文档 单击此处
3) .prepend() 查看文档 单击此处


1
投票

使用 .prepend

$("#tableId tbody").prepend("tr code here");

0
投票

你可以使用这样的东西:

$('table > tbody > tr:first').before('<tr>...</tr>');

0
投票

试试这个:

<table id="tblTest">
    <tr>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
    </tr>
</table>
<table>
    <tr>
        <td><input type="button" value="Add" id="btnAdd"></input></td>
    </tr>
</table>


var row = $("#tblTest tbody").html();
$("#btnAdd").click(function(){
    $("#tblTest tbody").prepend(row);
});

小提琴


0
投票

使用

.prepend()
方法。这个功能正是您所需要的。


0
投票

在 Vanilla JavaScript 中,在表格顶部添加新行非常简单:

const table = document.getElementById("myTable");

var row = myTable.insertRow(1);  // Give index as 1

var cell1= row.insertCell(0);
var cell2= row.insertCell(1);

cell1.innerHTML = "Contents in cell1";
cell2.innerHTML = "Contents in cell2";

insertRow()
方法的索引指定为
1

© www.soinside.com 2019 - 2024. All rights reserved.