我使用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>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
当前回答
<table id=myTable>
<tr><td></td></tr>
<style="height=0px;" tfoot></tfoot>
</table>
您可以缓存页脚变量并减少对DOM的访问(注意:使用假行而不是页脚可能会更好)。
var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
其他回答
要在当前行的最后一行添加新行,可以使用如下方法
$('#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";
这是我的解决方案
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
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>。
这是一些非常奇怪的缩进,但您更容易看到这个示例中的情况。
上面的答案非常有用,但当学生参考此链接从表单中添加数据时,他们通常需要一个示例。
我想提供一个示例,从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>
当表中没有任何行时,我使用这种方式,而且每一行都非常复杂。
style.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...