1. 程式人生 > >js動態表格新增一行刪除一行儲存一行

js動態表格新增一行刪除一行儲存一行

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript"> 
 //視窗表格增加一行
  function addNewRow(){
   var tabObj=document.getElementById("myTab");//獲取新增資料的表格
   var rowsNum = tabObj.rows.length;  //獲取當前行數
   //var colsNum=tabObj.rows[rowsNum-1].cells.length;//獲取行的列數
   
   var myNewRow = tabObj.insertRow(rowsNum);//插入新行
   //1checkbox
   var newTdObj1=myNewRow.insertCell(0);
   newTdObj1.innerHTML="<input type='checkbox' name='chkArr'   id='chkArr_"+rowsNum+"' style='width:20px' />";
   //2序號
   var newTdObj2=myNewRow.insertCell(1);
   newTdObj2.innerHTML="<input type='text'     name='nodecode' id='nodecode_"+rowsNum+"' style='width:40px' value='"+rowsNum+"'/>";
   //3節點名稱
   var newTdObj3=myNewRow.insertCell(2);
   newTdObj3.innerHTML="<input type='text'     name='nodename' id='nodename_"+rowsNum+"' style='width:140px' />";
   
   //4
   var newTdObj4=myNewRow.insertCell(3);
   newTdObj4.innerHTML="<input type='text'     name='nodeper_"+rowsNum+"'   style='width:140px' />";
   
   var newTdObj5=myNewRow.insertCell(4);
   newTdObj5.innerHTML="<input type='text'     name='nodeper_"+rowsNum+"'   style='width:140px' />";
   
   
   var newTdObj6=myNewRow.insertCell(5);
   newTdObj6.innerHTML="<input type='button'    name='saveButton'  id='saveButton_"+rowsNum+"'  value='儲存'  onclick='saveData("+rowsNum+")' style='width:60px' />";
  }
//視窗表格刪除一行
  function removeRow(){
   var chkObj=document.getElementsByName("chkArr");
   var tabObj=document.getElementById("myTab");
   for(var k=0;k<chkObj.length;k++){
    if(chkObj[k].checked){
     tabObj.deleteRow(k+1);
     k=-1;
    }
   }
  }
  
  function saveData(rowsNum){
  var codeValue = document.getElementById("nodename_"+rowsNum).value;
  alert(codeValue);
  var nodeperValueArray = document.getElementsByName("nodeper_"+rowsNum);
 for(var i=0;i<nodeperValueArray.length;i++){
var nodeperValue = nodeperValueArray[i].value;
alert(nodeperValue);
 }
  }
</script>
</head>
<body>
<input type="button" name="xx" onclick="addNewRow();" value="增加一行" />
<input type="button" name="yy" onclick="removeRow();" value="刪除一行" />
<table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">
        <tr>
         <td width="40px"  align="center" >操作</td>
         <td width="40px"  align="center" >序號</td>
         <td width="70px"  align="center" >節點名稱</td>
         <td width="70px"  align="center" >節點編碼1</td>
<td width="70px"  align="center" >節點編碼2</td>
<td width="70px"  align="center" >操作</td>
       </tr>
    </table>
</body>
</html>