我使用jQuery向表中添加一行作为最后一行。
我是这样做的：
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以向这样的表中添加的内容（例如输入、选择、行数）是否有限制？有不同的方法吗？
当前回答
所以，自从@Luke Bennett回答这个问题后，情况就发生了变化。这里有一个更新。
jQuery自1.4版（？）起自动检测您试图插入的元素（使用append（）、prepend（）、before（）或after（）方法中的任何一种）是否是<tr>，并将其插入到表中的第一个<tbody>中，如果不存在，则将其包装到新的<tbody中。
因此，是的，您的示例代码是可以接受的，并且可以与jQuery1.4+一起工作。；）
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
其他回答
在你的情况下，纯JS很短
myTable.firstChild.innerHTML += '<tr><td>my data</td><td>more data</td></tr>'
函数add（）{myTable.firstChild.innerHTML+=`<tr><td>日期</td><td>$｛+新日期｝</td></tr>`}td｛border:1px实心黑色；｝<button onclick=“add（）”>添加</button><br><table id=“myTable”><tbody></tbody></table>
（如果我们删除<tbody>和firstChild，它也会起作用，但用<tbody>包装每一行）
我知道您要求使用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>
我希望这有帮助。
这是一些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> </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编程——我甚至不想去想那个噩梦。
上面的答案非常有用，但当学生参考此链接从表单中添加数据时，他们通常需要一个示例。
我想提供一个示例，从from获取输入，并使用.after（）使用字符串插值将tr插入到表中。
function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();
$('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}
函数add（）{let studentname=$（“input[name='studentname']”）.val（）；let studentmark=$（“input[name='studentmark']”）.val（）；$（'#student-tr:last'）.after（`<tr><td>$｛studentname｝</td><td>${studentmark｝</td></tr>`）；}<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><!DOCTYPE html><html><head><style>表{字体系列：arial，sans-serif；边界塌陷：塌陷；宽度：100%；}td，第{边框：1px实心#dddddd；文本对齐：左侧；填充：8px；}tr：第n个孩子（偶数）{背景色：#dddddd；}</style></head><body><表单><input-type='text'name='studentname'/><input-type='text'name='studentmark'/><input-type='button'onclick=“add（）”value=“add new”/></form><table id=“学生”><thead><th>名称</th><th>标记</th></thead></table></body></html>
要在当前行的最后一行添加新行，可以使用如下方法
$('#yourtableid tr:last').after('<tr>...</tr><tr>...</tr>');
您可以如上所述追加多行。也可以像这样添加内部数据
$('#yourtableid tr:last').after('<tr><td>your data</td></tr>');
用另一种方式你可以这样做
let table = document.getElementById("tableId");
let row = table.insertRow(1); // pass position where you want to add a new row
//then add cells as you want with index
let cell0 = row.insertCell(0);
let cell1 = row.insertCell(1);
let cell2 = row.insertCell(2);
let cell3 = row.insertCell(3);
//add value to added td cell
cell0.innerHTML = "your td content here";
cell1.innerHTML = "your td content here";
cell2.innerHTML = "your td content here";
cell3.innerHTML = "your td content here";
