关于js对表格进行逐行添加，今天抽空整理了一下：新建一个html文件（没有编辑器的可以新建一个demo.txt文件，然后改后缀名为demo.html），把下面代码全部贴进去即可。
功能包括：表格添加一行，表格删除一行，表格遍历取值等。
点击说明：点击添加按钮，则表格添加一行，可进行录入，删除按钮，可删除当前行，其他行不影响。删除或者添加，每行的的编号都会自动变化，套餐和价格是<input/>，内容是
<textarea></textarea>,点击保存按钮的时候，遍历表格中所有行，把所有行的数据取出来弹框弹出展示，后期可根据需求传递到后台进行处理。
效果图：
源代码：
<!--
Creator： WangPeng
CreateTime : 2018-01-25
去年今日此门中，人面桃花相映红。
人面不知何处去，桃花依旧笑春风。
-->
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>动态增加表格</title>
</head>
<style>
td /*设置表格文字左右和上下居中对齐*/
{
vertical-align: middle;
text-align: center;
padding: 9px;
}
textarea{
min-height: 60px;
min-width: 200px;
}
</style>
<script type=\"text/javascript\">
function del(obj){
if(document.getElementById(\'tbodyid\').children.length>1){
var trid=obj.parentNode.parentNode.id;
var objtr=document.getElementById(trid);
document.getElementById(\'tbodyid\').removeChild(objtr);
var tbody=document.getElementById(\'tbodyid\');
var countchildren=tbody.childElementCount;
for (var i=0;i<countchildren;i++){
tbody.children[i].children[0].innerHTML=i+1;
}
}
else{
alert(\"请不要全部删除\");
}
}
function add(){
var trid = new Date().getTime();
var packageid=trid+\'packageid\';
var countid=trid+\'countid\';
var priceid=trid+\'priceid\';
var objtr=document.createElement(\'tr\');
objtr.id=trid;
objtr.innerHTML=\"<td></td> \" +
\" <td><input id=\'\"+trid+\"packageid\'></td> \" +
\" <td><textarea id=\'\"+trid+\"countid\'></textarea></td> \" +
\" <td><input id=\'\"+trid+\"priceid\'></td> \" +
\" <td><button type=\'button\' onclick=\'del(this)\'>删除</button></td>\";
document.getElementById(\"tbodyid\").appendChild(objtr);
var tbodyobj=document.getElementById(\'tbodyid\');
var countchildren=tbodyobj.childElementCount;
for (var i=0;i<countchildren;i++){
tbodyobj.children[i].children[0].innerHTML=i+1;
}
}
function save(){
var tbodyobj=document.getElementById(\'tbodyid\');
var countchildren=tbodyobj.childElementCount;
var trid=\"\";
var packageid=\"\";
var countid=\"\";
var priceid=\"\";
var list=new Array();
for (var i=0;i<countchildren;i++){
trid=tbodyobj.children[i].id;
packageid=trid+\"packageid\";
countid=trid+\"countid\";
priceid=trid+\"priceid\";
var map={
\"套餐\":document.getElementById(packageid).value,
\"内容\":document.getElementById(countid).value,
\"价格\":document.getElementById(priceid).value
}
list.push(map);
}
console.log(\"list:\",list);
alert(JSON.stringify(list));
}
</script>
<body>
<div>
<div style=\"width: 80%;margin: 10%\">
<table border=\"1\" bordercolor=\"#a0c6e5\" style=\"border-collapse:collapse;\" align=\"center\" width=\"100%\">
<caption>动态增加表格</caption>
<thead>
<tr>
<th width=\"5% \">序号</th>
<th width=\"20%\">套餐</th>
<th width=\"30%\">内容</th>
<th width=\"10%\">价格</th>
<th width=\"10%\">操作</th>
</tr>
</thead>
<tbody id=\"tbodyid\">
<tr id=\"123\">
<td>1</td>
<td><input id=\"123packageid\"></td>
<td><textarea id=\"123countid\"></textarea></td>
<td><input id=\"123priceid\"></td>
<td><button type=\"button\" onclick=\'del(this)\'>删除</button></td>
</tr>
</tbody>
</table>
<button type=\"button\" onclick=\'add()\'>添加</button>
<button type=\"button\" onclick=\'save()\'>保存</button>
</div>
</div>
</body>
</html>
js动态生成其他的也同理，可根据自己需要在指定位置创建自己所需要的元素。
以上所述是小编给大家介绍的js动态添加表格逐行添加、删除、遍历取值的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
© 版权声明
THE END
暂无评论内容