js动态操作表格

PHP中文网 • 2025年3月8日 15:52:21 • 编程技术 • 阅读 2

这次给大家带来js动态操作表格，使用js动态操作表格的注意事项有哪些，下面就是实战案例，一起来看一下。

关于js对表格进行逐行添加，今天抽空整理了一下：新建一个html文件（没有编辑器的可以新建一个demo.txt文件，然后改后缀名为demo.html），把下面代码全部贴进去即可。

功能包括：表格添加一行，表格删除一行，表格遍历取值等。

点击说明：点击添加按钮，则表格添加一行，可进行录入，删除按钮，可删除当前行，其他行不影响。删除或者添加，每行的的编号都会自动变化，套餐和价格是，内容是

,点击保存按钮的时候，遍历表格中所有行，把所有行的数据取出来弹框弹出展示，后期可根据需求传递到后台进行处理。

效果图：

源代码：

    动态增加表格  td /*设置表格文字左右和上下居中对齐*/  {    vertical-align: middle;    text-align: center;    padding: 9px;  }  textarea{    min-height: 60px;    min-width: 200px;  }  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=" " +    "       " +    "       " +    "       " +    "      ";    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));  }  
  
    动态增加表格              序号       套餐       内容       价格       操作     
    
              1