通过JS为 Table表增加一行，通过复选框删除多行，也可通过所在行的delete链接删除本行

本文链接：https://blog.csdn.net/zhangqinhappy/article/details/6764253

Table表增加一行，通过复选框删除多行，也可通过所在行的delete链接删除本行。。。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<script>  
//给table增加一行  
function addTableRow() {  
    var table1 = document.getElementById('table1');  
    var cloneTab = document.getElementById('table2');  
    //alert(cloneTab.firstChild.firstChild.innerHTML);  
    //alert(cloneTab.firstChild.firstChild.cloneNode(true).innerHTML);  
    table1.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true));  
  
    var v= table1.firstChild.childNodes;  
    var len = v.length;  
    for(var i=1;i<len;i++){  
        v[i].childNodes[0].firstChild.id=i;//给第一个单元格id赋值  
    }  
}  
//通过当前行后面的delete链接删除本行
function removeRow(obj){
	 var t=document.getElementById('table1');
	  t.deleteRow(obj.parentNode.parentNode.rowIndex)
	} 


//给table删除指定的行，可以一行，也可以多行  
function delTableRow(){  
    var table1 = document.getElementById('table1');  
    var isChecked = document.getElementsByName('isChecked');  
    var len = isChecked.length;  
    for(var i=len-1;i>=0;i--){  
        if(isChecked[i].checked==true){  
             table1.firstChild.removeChild(isChecked[i].parentNode.parentNode);  
            //alert(isChecked[i].id);  
            //alert(isChecked[i].parentNode.parentNode.innerHTML);  
        }  
    }  
}  
</script>
</head>
<body>
<!--显示table-->
<table border="1" cellpadding="0" cellspacing="0" class="datalist"
	id="table1">
	<tr>
		<th width="38" nowrap="nowrap" scope="col">00</th>
		<th width="50" nowrap="nowrap" scope="col">0</th>
		<th width="50" nowrap="nowrap" scope="col">1</th>
		<th width="50" nowrap="nowrap" scope="col">2</th>
		<th width="50" nowrap="nowrap" scope="col">3</th>
		<th width="50" nowrap="nowrap" scope="col">4</th>
	</tr>
</table>

<!--控制table的按钮-->
<table>
	<tr align="center">
		<td colspan="10"><input type="button" value="增加"
			οnclick="addTableRow();" /> <input type="button" value="删除"
			οnclick="delTableRow();" /></td>
	</tr>
</table>

<!--模板table也叫做clone table style = "display:none"-->
<table id='table2' style="display: none">
	<tr>
		<td><input type="checkbox" name="isChecked" /><input
			type="hidden" size="6" value="" /></td>
		<td width="50" nowrap="nowrap" scope="col"><input
			type="text" size="6" maxlength="50" value="" /></td>
		<td width="50" nowrap="nowrap" scope="col"><input type="text"
			size="6" maxlength="50" value="" /></td>
		<td width="50" nowrap="nowrap" scope="col"><input type="text"
			size="6" maxlength="10" value="" /></td>
		<td width="50" nowrap="nowrap" scope="col"><select size="1">
			<option value="">请选择...</option>
			<option value="1">今天</option>
			<option value="2">明天</option>
		</select></td>
		<td width="50" nowrap="nowrap" scope="col"><a href="#"
			οnclick="removeRow(this);">delete</a></td>
	</tr>
</table>
</body>
</html>

运行后的效果见图！