用JavaScript向表中动态添加数据

使用JavaScript向表中动态添加数据，其实方法很简单。下面我们来分享一下实现方法

1.首先，写出表格的标题和主干

表格宽度=' 600 '边框=' 1 '单元格间距=' 0 '第几个/第几个名称/第几个位置/第几个操作/第几个/第几个/第几个/第几个tbody id=' tbmain'/tbody/table2。下一步是在net表中添加数据，这里使用原生javascript

脚本类型='text/javascript' //模拟一段JSON数据，实际从数据库中读取var per=[{id:001，名为： '张山'，job3360' student' }，{id:002，名为：' Reese '，job: '。window . onload=function(){ var t body=document . getelementbyid(' tbMain ')；for(var I=0；长度I；I){//traverse JSON data var trow=GetDataRow(per[I])；//定义一个方法返回tr数据t body . appendchild(trow)；} }函数getDataRow(h){ var row=document . create element(' tr ')；//创建行var id cell=document . create element(' TD ')；//创建第一列id idcell . innerhtml=h . id；//填写数据行. appendchild(idCell)；//增加一行，类似于var name cell=document . create element(' TD ')；//创建第二列名NameCell . InnerHTML=h . name；row . appendchild(NameCell)；var JobCell=document . CreateElement(' TD ')；//创建第三列作业jobcell . innerhtml=h . job；row . appendchild(JobCell)；//此时，json中的数据已经添加到表中。这里，在每行的末尾添加删除按钮var del cell=document . create element(' TD ')。//创建第四列，操作列行. appendchild(delCell)；var btnDel=document . create element(' input ')；//创建输入控件btndel.setattribute ('type '，' button ')；//type=' button' btndel。setattribute ('value '，' delete ')；//删除操作btndel . onclick=function(){ if(confirm)()确定要删除这一行吗？)){//找到按钮所在行的节点，然后删除这一行：this。parent node . parent node . remove child(这。parent node . parent node)；//btnDel-TD-tr-t body-delete(tr)//刷新网页恢复。在实际操作中，需要删除数据库中的数据才能真正删除} } delcell . appendchild(btnDel)；//在td中增加删除按钮，别忘了返回行；//返回tr数据}/脚本3。网页测试

如果显示成功，单击删除按钮并确认删除此行

删除第二行，好！

以上是边肖介绍的动态向表中添加数据的JavaScript，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！