本文摘自PHP中文网,作者墨辰?R,侵删。
总结:以上就是本篇文的全部内容HTML中表格动态添加的方法,希望能对大家的学习有所帮助。 相关推荐:具体代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | < html >
< head >< title >Table</ title ></ head >
< body >
< table border = "1" >
< thead >
< tr >
< td >First Name</ td >
< td >Last Name</ td >
< td > </ td >
</ tr >
< thead >
< tbody id = "tb" >
< tr id = "1st" >
< td >张</ td >
< td >三</ td >
< td >< input type = "button" value = "Add" onclick = "add()" >
< input type = "button" value = "Del" onclick = "del(this)" ></ td >
</ tr >
</ tbody >
</ table >
</ body >
</ html >
< script >
function add() {
var trObj = document.createElement("tr");
trObj.id = new Date().getTime();
trObj.innerHTML = "< td >< input name = 'firstName' /></ td >< td >< input name = 'lastName' /></ td >< td >< input type = 'button' value = 'Add' onclick = 'add()' > < input type = 'button' value = 'Del' onclick = 'del(this)' ></ td >";
document.getElementById("tb").appendChild(trObj);
}
function del(obj) {
var trId = obj.parentNode.parentNode.id;
var trObj = document.getElementById(trId);
document.getElementById("tb").removeChild(trObj);
}
</ script >
|
上面的代码中,首先在body中构造了一个table,为了方便后续的操作,我们给table添加了thead 和 tbody 标签,thead标签标示的是表格头,tbody标签标示的是表格主体。
阅读剩余部分
相关阅读 >>
Html页面原生video标签隐藏下载按钮功能
如何显示隐藏Html元素
Html媒体(media)是什么
Html的this用法是什么
Html中hr是什么意思
Html怎么隐藏p标签
Html文本格式化的实例详解
利用Html 5制作一个简单的时钟效果
Html中怎么隐藏列表
Html中的lang属性是干嘛的呢?Html中的lang属性有什么作用呢?
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML中表格动态添加的方法