<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态表格</title>
</head>
<body>
<p>动态表格彻底研究</p>
<p>对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术</p>
<p>
<input type="button" name="Submit" value="刷新" onclick="onRefresh()" />
<input type="button" name="Submit2" value="全选" onclick="selectall()"/>
<input type="button" name="Submit8" value="反选" onclick="inverse()" />
<input type="button" name="Submit3" value="不选" onclick="noselect()"/>
<input type="button" name="Submit4" value="添加行与列" onclick="insert_row()" />
<input type="button" name="Submit7" value="删除选择" onclick="delRow()" />
<input type="button" name="Submit5" value="拷贝选择" onclick="copyRow()"/>
<input type="button" name="Submit92" value="居中对齐" onclick="tableAlign()"/>
<input type="button" name="Submit922" value="隔行变色" onclick="changeColor()"/>
</p>
<table width="50%" border="1" cellpadding="1" cellspacing="2" bordercolor="#CCCCCC" id="myTable">
<tr>
<td width="7%">
<label>
<input type="checkbox" name="checkbox" value="checkbox" />
</label> </td>
<td width="51%">1</td>
<td width="14%">1</td>
<td width="14%">1</td>
<td width="14%">1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox2" value="checkbox" /></td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox3" value="checkbox" /></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox4" value="checkbox" /></td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox5" value="checkbox" /></td>
<td>5</td>
<td colspan="2">55</td>
<td>5</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox6" value="checkbox" /></td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>56</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox7" value="checkbox" /></td>
<td>777</td>
<td>7</td>
<td>77</td>
<td>7</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox8" value="checkbox" /></td>
<td>88</td>
<td>8</td>
<td>88</td>
<td>77</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox9" value="checkbox" /></td>
<td>999</td>
<td>99</td>
<td>99</td>
<td>999</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox10" value="checkbox" /></td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</table>
<br />
<p></p>
</body>
</html>
js代码：
<script type="text/javascript"> var form = document.forms["form1"]; var table = document.getElementById("myTable"); var selectBox = table.getElementsByTagName("input"); var tr = table.getElementsByTagName("tr"); var clicked = true; function insert_row(){ //alert(table.rows[0].cells.length) var thisrow = table.insertRow(0); var thiscell = thisrow.insertCell(0); thiscell.innerHTML = "<input type="checkbox" name="checkbox10" value="checkbox" />"; var thiscell1 = thisrow.insertCell(1); thiscell1.innerHTML = "cell"; var thiscell2 = thisrow.insertCell(2); thiscell2.innerHTML = "cell"; var thiscell3 = thisrow.insertCell(3); thiscell3.innerHTML = "cell"; var thiscell4 = thisrow.insertCell(4); thiscell4.innerHTML = "cell"; thiscell4.align = "center"; } function insert_Cell(){ var y = table.rows[0].insertCell(0); y.colSpan="2"; y.innerHTML = "sssss"; } function selectall(){ for(i=0;i<selectBox.length;i++){ selectBox[i].checked = true; } } function noselect(){ for(i=0;i<selectBox.length;i++){ selectBox[i].checked = false; } } function inverse(){ for(i=0;i<selectBox.length;i++){ if(selectBox[i].checked){ selectBox[i].checked = false; }else{ selectBox[i].checked = true; } } } function delRow(){ for(i=selectBox.length-1;i>=0;i--){ //alert(typeof(selectBox[i])); if(selectBox[i].checked){ table.deleteRow(i); } } } function onRefresh(){ location.reload(); } function copyRow(){ for(i=0;i<selectBox.length;i++){ if(selectBox[i].checked){ //var copytable = document.getElementById("copyTable"); var tablerow = table.insertRow(table.rows.length); tablerow.innerHTML = table.rows[i].innerHTML; } } } function tableAlign(){ for(i=0;i<selectBox.length;i++){ if(selectBox[i].checked && clicked){ table.rows[i].align = "center"; } } } function changeColor(){ var skip = true; for(i=0;i<tr.length;i++){ if(skip){ tr[i].bgColor = "#cccccc"; skip = false; }else{ tr[i].bgColor = "#ffffff"; skip = true; } } } </script>