我使用jQuery向表中添加一行作为最后一行。
我是这样做的：
$('#myTable').append('<tr><td>my data</td><td>more data</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>
其他回答
在我看来，最快和明确的方法是
//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
//Add row
table.append('<tr><td>hello></td></tr>');
这是演示Fiddle
此外，我还可以推荐一个小函数来进行更多的html更改
//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
return this.replace(re, function (_, k){
return typeof o[k] != 'undefined' ? o[k] : '';
});
}
}());
如果你用我的弦乐器，你可以这样做
var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
'<td>{{id}}</td>'+
'<td>{{name}}</td>'+
'<td>{{phone}}</td>'+
'</tr>';
//Add row
table.append(row.compose({
'id': 3,
'name': 'Lee',
'phone': '123 456 789'
}));
这里是演示不停摆弄
我知道您要求使用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>
我希望这有帮助。
如果您有另一个变量，您可以在＜td＞标记中访问，就像那样。
这样我希望会有帮助
var table = $('#yourTableId');
var text = 'My Data in td';
var image = 'your/image.jpg';
var tr = (
'<tr>' +
'<td>'+ text +'</td>'+
'<td>'+ text +'</td>'+
'<td>'+
'<img src="' + image + '" alt="yourImage">'+
'</td>'+
'</tr>'
);
$('#yourTableId').append(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>
// 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);
