<!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" /> <style> table{border-collapse:collapse;} table td{height:30px; line-height:30px;} </style> <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> <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_Cell(){ var y = table.rows[0].insertCell(0); y.colSpan="2"; y.innerHTML = "sssss"; } //添加行 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 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--){ 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"; } } } //对table进行隔行换色 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> </body> </html>