【deleteRow】javascript操作table(insertRow deleteRow insertCell deleteCell方法详解)-insertCell-deleteCell

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)】，下面是详细的讲解！

javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)

<script type="text/javascript">

var trIndex=0;

//动态增加行
unction appendConvert(){

  //var sel=document.getElementById("selectConvertName");
  var sel=document.getElementsByName("selectConvertName")[0];

  var className;
  if(null!=sel){
   for(var i=0; i < sel.options.length; i++){
    if(sel.options[i].selected)
     className=sel.options[i].value;
   }
  }
  //数据来源于ajax，json形式。
convert.getConvertBean2Json(className,
    function(result) {
   var obj=eval('('+result+')');
   var table=document.getElementById("convertTable");

   var newRow=table.insertRow(trIndex+1);
   newRow.insertCell(0).innerHTML=obj.name+"<input type='button' value='删除' onclick='deleteRow(this)'>";
   newRow.insertCell(1).innerHTML="<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name' value='"+obj.name+"'>";
   if(null!=obj.paramList){
    var paramStr="";
    for(var i=0; i < obj.paramList.length; i++){
     paramStr=paramStr+
      "参数名："+obj.paramList[i].name+
      "；参数类型："+obj.paramList[i].type+
      "；参数值：<input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
      "<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
      "<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+obj.paramList[i].type+"'>";
    }
    newRow.insertCell(2).innerHTML=paramStr;
   }
   trIndex++;
  });

 }

//删除行
on deleteRow(r){
  var i=r.parentNode.parentNode.rowIndex;
  document.getElementById('convertTable').deleteRow(i);
  trIndex--;
 }

</script>

关于javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)的用户互动如下：

　　相关问题：javascript table 添加行和和删除行问题

　　答：appendChild(object) 添加子节点 >>详细

　　相关问题：关于table的javascript问题？

　　答：http://jsfiddle.net/xcchcaptain/w6a2hvje/1/ 如demo所示 因为你insertRow导致table的tr,length发生了改变 当i=tab.row.length-1时，此时其实tab.rows[i]引用的你新增的tr,即myrow，但是新增的tr，并没有添加td，此时myrow.cells[0]是undefined >>详细

　　相关问题：javascript 表格的增删查改，求完善一下表格的修改...

　　答：function edit(){ var row=document.getElementById('tr_no').value*1; var table=document.getElementById('table'); var tr=table.getElementsByTagName('tr'); var td=tr[row-1].getElementsByTagName('td'); td[0].innerHTML=document.getEl... >>详细