JS 根据表格(TABLE)模板增加一行(ROW)

最新推荐文章于 2024-09-05 19:28:43 发布

原创最新推荐文章于 2024-09-05 19:28:43 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #table #row add

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript动态插入行至表格，并在插入过程中进行模板类型的匹配与序列号自增，确保数据结构的一致性和操作的高效性。

/**********************
*增加一行
**表名、序号、模板类型
*************************/
function insertRow(pageCode,index,tpltype){
 index = index==null?0:index;
 var gi = parseInt(globalindex[pageCode]);
 if(isNaN(gi)){//不是数字
     globalindex[pageCode] = index;//修改全局数组中记录该表格的当前序号
     gi = index;
 }
 var tbody = document.getElementById(pageCode+"_Data").tBodies.item(0);//获取第一个<TBody>里的内容
 var tBodiesLen =document.getElementById(pageCode+"_Data").tBodies.item(0).rows.length;//获取第一个<TBody>里的行(即<tr>)数
    for (var i =0;i<tBodiesLen;i++)
    {
      if(document.getElementById(pageCode+"_Data").tBodies.item(0).rows[i].id==tpltype) 
      {//匹配模板类型
   var s  = tbody.rows[i].outerHTML;
   while(s.indexOf("_[0]")>-1){//宏替换
    s = s.replace("_[0]","["+ gi +"]");
   }
   while(s.indexOf("_[seqno]")>-1){//宏替换
    s = s.replace("_[seqno]",(gi+1));//设置序号
   }
   s = s.replace(tpltype,pageCode+"_list"+gi);//改变tr的id,让其符合删除行时的规律
   var tdiv = document.createElement("div");//创建临时div
   tdiv.innerHTML = "<table id=tmpTable>"+s+"</table>";//设置临时div的innerHTML
   tdiv.style.display = "none";//设置临时DIV为隐藏
 
   document.appendChild(tdiv);//添加DIV
 
   var row = document.getElementById("tmpTable").tBodies.item(0).rows[0].cloneNode(true);//克隆临时table的第一行（因为每次只增加一行）
   document.removeChild(tdiv);//删除临时div
   document.getElementById(pageCode).tBodies.item(0).appendChild(row);//把行添加到指定的表格中
   break;
  }
    }
    gi++;//表格序号增加1
 globalindex[pageCode] = gi;//修改记录表格序号的数组

}