js动态添加逐行添加、删除和遍历表的示例代码

关于js逐行添加表格，今天花时间整理了一下：新建一个html文件(如果没有编辑器，可以新建一个demo.txt文件，然后把后缀改成demo.html)，把下面的代码全部粘贴进去。

功能包括：在表中添加一行，在表中删除一行，遍历表并取值。

点击说明：点击〖增加〗按钮，在表格中增加一行，可以输入；单击“删除”删除当前行，但其他行不会受到影响。删除或添加，每一行的数字会自动改变，包装和价格都输入/，内容为

Textarea/textarea，当你点击保存按钮时，遍历表格中的所有行，取出所有行的数据，弹出显示，然后根据需要转移到后台进行处理。

渲染：

源代码：

！-创作者：王鹏创作时间： 2018-01-25去年今日此门中，人面桃花相映红。人面不知何处去，桃花依旧笑春风。 - !DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题动态增加表格/title/headstyle td /*设置表格文字左右和上下居中对齐*/{垂直对齐： 中间；文本对齐：中心；padding: 9px }文本区{最小高度： 60px最小宽度： 200像素；}/style script type=' text/JavaScript ' function del(obj){ if(document。getelementbyid(' tbodyid ')。孩子们。长度1){ var trid=obj。父节点。父节点。id；var objtr=文档。getelementbyid(trid)；文件。getelementbyid(' tbodyid ').移除子对象(obj tr)；var t正文=文档。getelementbyid(' tbodyid ')；var计数子代=t body。childelementcountfor(var I=0；icountchildren I){ t body . children[I].儿童[0]。innerHTML=I ^ 1；} } else{ alert('请不要全部删除');} }函数add(){ var trid=new Date().getTime()；var package id=trid ' package idvar count id=trid ' count idvar price id=trid ' price idvar obj tr=document。创建元素(' tr ')；目标tr。id=tridobjtr。innerHTMl=' TD/TD ' ' TD输入id=' trid '包id '/TD ' ' tdtextarea id=' trid '计数id '/textarea/TD ' ' TD输入id=' trid ' priceid '/TD ' ' TD按钮类型=' button ' onclick=' del(this)'删除/button/TD '；文件。getelementbyid(' tbodyid ').appendChild(obj tr)；var tbody obj=文档。getelementbyid(' t body id ')；var count children=tbody obj。childelementcountfor(var I=0；icountchildren孩子们。儿童[0]。innerHTML=I ^ 1；} }函数save(){ var tbody obj=document。getelementbyid(' t body id ')；var count children=tbody obj。childelementcountvar trid=var package id=var countid=var priceid=var list=new Array()；for(var I=0；icountchildren I){ trid=tbodobj . children[I].id；package id=trid ' package id countid=trid ' countid priceid=trid ' priceid var map={ '套餐：文件。getelementbyid(包id).值，'内容：文件。getelementbyid(计数id).值，'价格：文件。getelementbyid(priceid ).值}列表。推送(地图)；} console.log('list: '，list)；警报(JSON。stringify(list))；}/scriptbodydiv div style=' width : 80%；保证金： 10%表格边框=' 1 '边框颜色=' # a0c6e 5 '样式='边框-折叠：折叠；align='center' width='100% '标题动态增加表格/标题和tr th宽度='5% '序号/th宽度='20% '套餐/th宽度='30% '内容/th宽度='10% '价格/th宽度='10% '操作/th/tr/ad t正文id=' tbodyid ' tr id=' 123 ' td1/TD tdinput id=' 123 package id '/TD tdtextarea id=' 123 count id '/textarea/TD tdinput id=' 123 riceid '/TD TD TD tdbutton type=' button ' onclick=' del(this)'删除/button/TD/tr/t body/table按钮类型=' button ' onclick=' add()'添加/button button type=' button ' onclick=' save()'保存/button/div/div/body/htmljs动态生成其他的也同理，可根据自己需要在指定位置创建自己所需要的元素。

总结

以上所述是小编给大家介绍的射流研究…动态添加表格逐行添加、删除、遍历取值的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！