js動態表格新增一行刪除一行儲存一行
阿新 • • 發佈:2018-11-11
<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>
<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);
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" >操作</td>
</tr>
</table>
</body>
</html>