jquery 在表的第一行上方添加新行

bf1o4zei  于 2023-11-17  发布在  jQuery
关注(0)|答案(8)|浏览(129)

我有一个有12列的表。每列都有一个文本框。When I click on an 'Add' button, a new row should be inserted above the first row of the table。我该怎么做呢?假设,如果我使用jquery append(),它只会在末尾添加行,但我想在第一行的顶部添加。

vsikbqxv

vsikbqxv1#

尝试

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

字符串

zqry0prt

zqry0prt2#

Vanilla JavaScript中,它真的很简单:

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

字符串

jvidinwx

jvidinwx3#

您可以使用以下替代方案
1)**.before()用于文档click here
2)
.insertBefore()用于文档click here
3)
.prepend()**用于文档click here

pieyvz9o

pieyvz9o4#

使用.prepend

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

字符串

wpcxdonn

wpcxdonn5#

你可以使用这样的东西:

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

字符串

a1o7rhls

a1o7rhls6#

试试这个:

<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);
});

字符串
Fiddle

fjnneemd

fjnneemd7#

使用.prepend()方法。这个函数做的正是你需要的。

yi0zb3m4

yi0zb3m48#

在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

相关问题