js控制增加删除行的例子
自己写的:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="动态增加行">
<META NAME="Description" CONTENT="http://qwzsky.cnblogs.com/">
</HEAD>
<style type="text/css">
table{
border : 1px solid black ;
}
td{
width : 100px ;
border : 1px solid black ;
}
</style>
<script language="javascript" type="text/javascript">
function insertRow(){
_table=document.getElementById('tbl');
var node = _table.childNodes[0].cloneNode(true);
_table.appendChild(node);
}
function deleteRow(){
_table.childNodes[0].removeNode(true);
}
</script>
<BODY>
<input id="Insert" type="button" value="Insert" onclick="insertRow();">
<input id="Delete" type="button" value="Delete" onclick="deleteRow();">
<table border="1" id= tbl>
<tr>
<td><input type="checkbox"></input></td>
<td>NO</td>
<td>UserID</td>
<td>Name</td>
</tr>
</table>
</BODY>
</HTML>
别人的例子:
<html>
<head>
</head>
<body>
<table id =table1 bordercolor="#000000" width="200" border="1">
<tr>
<td>00</td> <td>01</td> <td>02</td>
</tr>
<tr>
<td>10</td> <td>11</td> <td>12</td>
</tr>
<tr>
<td>20</td> <td>21</td> <td>22</td>
</tr>
</table>
<br>
<input type="button" value="删除一行" onclick="deleRow()">
<input type="button" value="删除一列" onclick="deleColum()">
<BR>
<input type="button" value="增加一行" onclick="addRow()">
<input type="button" value="增加一列" onclick="addColum()">
<script language="javascript">
var _table =document.getElementById('table1');
function deleRow()
{
_table.deleteRow(_table.rows.length-1);
}
function deleColum()
{
for(var i =0; i<_table.rows.length;i++)
{
var colum = _table.rows[0].cells.length;
_table.rows[i].deleteCell(colum-1);
}
}
function addColum()
{
var colum = _table.rows[0].cells.length;
for(var i=0;i<_table.rows.length;i++)
{
var tdNode = _table.rows[i].insertCell(colum);
var text = document.createTextNode(i);
tdNode.appendChild(text);
}
}
function addRow()
{
var trNode = _table.insertRow(_table.rows.length);
for (var j=0;j<_table.rows[0].cells.length;j++)
{
var tdNode = trNode.insertCell(j);
var text =document.createTextNode(j);
tdNode.appendChild(text);
}
}
</script>
</body>
</html>
自己写的可以根据checkbox来动态删除
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="动态增加行">
<META NAME="Description" CONTENT="http://qwzsky.cnblogs.com/">
</HEAD>
<style type="text/css">
table{
border : 1px solid black ;
}
td{
width : 100px ;
border : 1px solid black ;
}
</style>
<script language="javascript" type="text/javascript">
function insertRow(){
var _table=document.getElementById('tbl');
var node = _table.childNodes[0].cloneNode(true);
_table.appendChild(node);
}
function deleteRow(){
var _table=document.getElementById('tbl');
var ok=document.getElementsByName('ck');
for(var i=1;i<ok.length;i++)
{
if(ok[i].checked==true)
{
_table.deleteRow(i);
i=i-1;
}
}
}
</script>
<BODY>
<input id="Insert" type="button" value="Insert" onclick="insertRow();">
<input id="Delete" type="button" value="Delete" onclick="deleteRow();">
<table border="1" id= tbl>
<tr>
<td><input type="checkbox" name ="ck"></input></td>
<td>NO</td>
<td>UserID</td>
<td>Name</td>
</tr>
</table>
</BODY>
</HTML>
增加了全选按钮后的页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="动态增加行">
<META NAME="Description" CONTENT="http://qwzsky.cnblogs.com/">
</HEAD>
<style type="text/css">
table{
border : 1px solid black ;
}
td{
width : 100px ;
border : 1px solid black ;
}
</style>
<script language="javascript" type="text/javascript">
function insertRow(){
var _table=document.getElementById('tbl');
var node = _table.childNodes[0].cloneNode(true);
_table.appendChild(node);
}
function deleteRow(){
var _table=document.getElementById('tbl');
var ok=document.getElementsByName('ck');
var checkBoxArray = new Array();
var allInputObject=document.body.getElementsByTagName("input");
var checkBoxIndex =0;
for( var i =0;i<allInputObject.length;i++)
{
if(allInputObject[i].type=='checkbox')
{
checkBoxArray[checkBoxIndex]= allInputObject[i];
checkBoxIndex++;
}
}
for(var i=1;i<ok.length;i++)
{
if(ok[i].checked==true)
{
_table.deleteRow(i);
i=i-1;
}
}
}
</script>
<BODY>
<input type="checkbox" id="check" onclick="check();" checked="false"></input>
<script language="javascript">
function check()
{
var checkboxs=document.getElementsByName('ck');
var check = document.getElementById('check');
var checktype = check.checked;
for(var i=0;i<checkboxs.length;i++)
{
checkboxs[i].checked = checktype;
}
}
</script>
<input id="Insert" type="button" value="Insert" onclick="insertRow();">
<input id="Delete" type="button" value="Delete" onclick="deleteRow();">
<table border="1" id= tbl>
<tr>
<td><input type="checkbox" name ="ck" ></input></td>
<td>NO</td>
<td>UserID</td>
<td>Name</td>
</tr>
</table>
</BODY>
</HTML>