運行效果：
源代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title></title>
<style>
#tab
{
border: 1px solid #aaa;
border-collapse: collapse;
width: 80%;
}
#tab th
{
border: 1px solid #aaaaaa;
background: #ECE9D8;
border-collapse: collapse;
padding: 5px;
text-align: left;
}
#tab td
{
border: 1px solid #d8d8d8;
border-collapse: collapse;
padding: 5px;
}
.txt
{
border: 1px solid #888;
background: #ECE9D8;
}
.checkBg
{
border: 1px solid #aaaaaa;
background: #ECE9D8;
}
.checkTxt
{
border: 1px solid #aaa;
background: ##d8d8d8;
}
.button
{
border: 1px solid #888;
margin: 5px 0px;
width: 80px;
background: #ECE9D8;
height: 22px;
line-height: 22px;
}
</style>
<script language="javascript" type="text/javascript">
function $(id) {return document.getElementById(id);}
function $F(name){return document.getElementsByTagName(name);}
function add(){
var otr = document.getElementById("tab").insertRow(-1);
var checkTd=document.createElement("td");
checkTd.innerHTML = '<input type="checkbox" class="check" onclick="ccolor()" name="checkItem">';
var otd1 = document.createElement("td");
otd1.innerHTML = '<span>1</span>';
var otd2 = document.createElement("td");
otd2.innerHTML = '<span>2</span>';
otr.appendChild(checkTd);
otr.appendChild(otd1);
otr.appendChild(otd2);
}
function ccolor()
{
var c1 = document.getElementsByName('checkItem');
for(var i=0; i<c1.length; i++)
if(c1[i].checked)
{
c1[i].parentNode.parentNode.className="checkBg";
c1[i].parentNode.nextSibling.firstChild.className="checkTxt";
c1[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";
}
else { c1[i].parentNode.parentNode.className="";
c1[i].parentNode.nextSibling.firstChild.className="";
c1[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
}
function del(){
var c = document.getElementsByName('checkItem');
var idArray = new Array();
for(var i=0; i<c.length; i++)
if(c[i].checked)
idArray.push(i);
var rowIndex;
var nextDiff =0;
for(j=0;j< idArray.length;j++)
{
rowIndex = idArray[j]+1-nextDiff++;
alert(rowIndex);
document.getElementById("tab").deleteRow(rowIndex);
}
}
function edit(){
var c = document.getElementsByName('checkItem');
var idArray = new Array();
for(var k=0; k<c.length; k++)
if(c[k].checked)
idArray.push(k);
var rowIndex;
var nextDiff =0;
for(j=0;j< idArray.length;j++)
{
rowIndex = idArray[j]+1;
document.getElementById("tab").rows(rowIndex).cells(1).innerHTML='<input type="text" class="txt" id="infoName_txt'+rowIndex+'" maxlength="30" value=""/>';
document.getElementById("tab").rows(rowIndex).cells(2).innerHTML='<input type="text" class="txt" id="infoValue_txt'+rowIndex+'" maxlength="30" value=""/>';
}
document.getElementById("edit").style.display="none";
document.getElementById("update").style.display="block";
}
function update(){
var c = document.getElementsByName('checkItem');
var idArray = new Array();
for(var k=0; k<c.length; k++)
if(c[k].checked)
idArray.push(k);
var rowIndex;
var nextDiff =0;
for(j=0;j< idArray.length;j++)
{
rowIndex = idArray[j]+1;
var str1=document.getElementById("infoName_txt"+rowIndex).value;
var str2=document.getElementById("infoValue_txt"+rowIndex).value;
document.getElementById("tab").rows(rowIndex).cells(1).innerHTML='<span>'+str1+'</span>';
document.getElementById("tab").rows(rowIndex).cells(2).innerHTML='<span>'+str2+'</span>';
}
document.getElementById("update").style.display="none";
document.getElementById("edit").style.display="block";
}
function alldell()
{
var des =document.getElementsByName('checkItem');
for(var i=0;i<des.length;i++)
{
if(des[i].checked=document.getElementById('delall').checked){
des[i].parentNode.parentNode.className="checkBg";
des[i].parentNode.nextSibling.firstChild.className="checkTxt";
des[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";}
else{ des[i].parentNode.parentNode.className="";
des[i].parentNode.nextSibling.firstChild.className="";
des[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
}
}
</script>
</head>
<body>
<table id="Table1">
<tr>
<td><input name="addv_btn" id="addv_btn" type="button" class="button" onclick="add();" value="add" /></td>
<td><input name="del_btn" id="del_btn" type="button" class="button" onclick="del();" value="del" /></td>
<td><input name="edit" id="edit" type="button" class="button" onclick="edit();" value="edit" /></td>
<td><input name="update" id="update" type="button" class="button" style="display: none" onclick="update();" value="update" /></td>
</tr>
</table>
<br>
<table id="tab">
<tr>
<th width="5%"><input type="checkbox" id="delall" onclick="alldell()"></td>
<th width="40%">Name</td>
<th width="55%">value</td>
</tr>
</table>
</body>
</html>