table標籤新增刪除行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文件</title>
<link href="component.css" _fcksavedurl=""component.css"" rel="stylesheet" type="text/css">
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1">
<div align="center">
<div id="table_div" align="left" style="height:30px; width:38% ;overflow:auto ">
<table width="95%" height="11%" border="1" align="left" id="tab2" cellpadding="0" cellspacing="0">
<tr>
<td width="41%" height="57%"> </td>
<td colspan="2" align="right">
<input name="add" type="button" id="add" value="add" onClick="addRow()"/>
<input name="remove7" type="button" id="remove7" value="remove" onClick="remove()"/>
<input name="edit" type="button" id="edit" value="edit"/>
</td>
</tr>
</table>
</div>
<div id="table_div" align="left" style="height:300px; background-color:#CCCCCC; width:38% ;overflow:auto ">
<table width="95%" height="11%" border="1" align="left" id="tab1" cellpadding="0" cellspacing="0">
<tr id="tr1">
<td height="43%"><input id="define" type="checkbox" name="checkbox" value="checkbox" onClick="selectall(this)">
select all </td>
<td width="21%">Name</td>
<td width="38%">address</td>
</tr>
</table>
</div>
</div>
</form>
</body>
<script >
var count =false
function addRow(){
count =!count;
var rowL = document.getElementById("tab1").rows.length;
var newtr =document.getElementById("tab1").insertRow(rowL);
newtr.id=rowL;
if(count){
newtr.style.background="#FFE1FF"
}else{
newtr.style.background="#FFEFD5"
}
var newCell1= newtr.insertCell();
var newCell2= newtr.insertCell();
var newCell3= newtr.insertCell();
newCell1.innerHTML ="<input type=/"checkbox/" name=/"checkbox/" value=/""+rowL+"/"> select";
newCell2.innerHTML =rowL;
newCell3.innerHTML ="<input type ='text' readonly=true id='address"+rowL+"_"+3+"' value =" +rowL+"_"+3+">";
}
function selectall(obj){
var ele= document.forms[0];
for(var i =0; i <ele.length; i++){
if(ele[i].type=="checkbox" && ele[i].id!=obj.id){
ele[i].checked= obj.checked;
}
}
}
function remove(){
var ele= document.forms[0];
for(var i =0; i <ele.length; i++){
if(ele[i].type=="checkbox" && ele[i].id!='define'){
if(ele[i].checked==true){
var DelRow=document.getElementById(ele[i].value).rowIndex;
tab1.deleteRow(DelRow);
remove();
}
}
}
}
</script>
</html>