我使用jQuery向表中添加一行作为最后一行。
我是这样做的:
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
我使用jQuery向表中添加一行作为最后一行。
我是这样做的:
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
当前回答
尼尔的回答是迄今为止最好的。然而,事情很快就会变得一团糟。我的建议是使用变量来存储元素并将其附加到DOM层次结构中。
HTML
<table id="tableID">
<tbody>
</tbody>
</table>
JAVASCRIPT语言
// Reference to the table body
var body = $("#tableID").find('tbody');
// Create a new row element
var row = $('<tr>');
// Create a new column element
var column = $('<td>');
// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');
// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);
其他回答
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>。
这是一些非常奇怪的缩进,但您更容易看到这个示例中的情况。
使用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>
对于此处发布的最佳解决方案,如果最后一行上有一个嵌套表,则新行将添加到嵌套表而不是主表。快速解决方案(考虑带/不带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>');
在这里,您只需单击按钮,即可获得输出。单击“添加行”按钮,然后添加一行。
我希望这很有帮助。
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
table {
margin: 25px 0;
width: 200px;
}
table th, table td {
padding: 10px;
text-align: center;
}
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<b>Add table row in jQuery</b>
<p>
Click on the button below to
add a row to the table
</p>
<button class="add-row">
Add row
</button>
<table>
<thead>
<tr>
<th>Rows</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is row 0</td>
</tr>
</tbody>
</table>
<!-- Script to add table row -->
<script>
let rowno = 1;
$(document).ready(function () {
$(".add-row").click(function () {
rows = "<tr><td>This is row "
+ rowno + "</td></tr>";
tableBody = $("table tbody");
tableBody.append(rows);
rowno++;
});
});
</script>
</body>
</html>
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
使用javascript函数编写
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';