我使用jQuery向表中添加一行作为最后一行。
我是这样做的：
$('#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
$('#tab').append($('<tr>')
.append($('<td>').append("text1"))
.append($('<td>').append("text2"))
.append($('<td>').append("text3"))
.append($('<td>').append("text4"))
)
一小条
$（'#tab'）.append（$（'<tr>'）追加（$（'<td>'）追加（“text1”））追加（$（'<td>'）追加（“text2”））追加（$（'<td>'）追加（“text3”））追加（$（'<td>'）追加（“text4”））)<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><table id=“tab”><tr><th>名字</th><th>姓氏</th>年龄</th><th>城市</th></tr><tr><td>吉尔</td><td>史密斯</td><td>50个</td><td>纽约</td></tr></table>
这是一些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编程——我甚至不想去想那个噩梦。
当表中没有任何行时，我使用这种方式，而且每一行都非常复杂。
style.css：
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
如果您正在使用Datatable JQuery插件，可以尝试。
oTable = $('#tblStateFeesSetup').dataTable({
"bScrollCollapse": true,
"bJQueryUI": true,
...
...
//Custom Initializations.
});
//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';
//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);
参考数据表fnAddData数据表API
也可以这样做：
$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")
