首页 > 代码库 > 对表格单元格的添加删除修改
对表格单元格的添加删除修改
<!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=http://www.mamicode.com/"刷新" onclick="onRefresh()" /> <input type="button" name="Submit2" value=http://www.mamicode.com/"全选" onclick="selectall()"/> <input type="button" name="Submit8" value=http://www.mamicode.com/"反选" onclick="inverse()" /> <input type="button" name="Submit3" value=http://www.mamicode.com/"不选" onclick="noselect()"/> <input type="button" name="Submit4" value=http://www.mamicode.com/"添加行与列" onclick="insert_row()" /> <input type="button" name="Submit7" value=http://www.mamicode.com/"删除选择" onclick="delRow()" /> <input type="button" name="Submit5" value=http://www.mamicode.com/"拷贝选择" onclick="copyRow()"/> <input type="button" name="Submit92" value=http://www.mamicode.com/"居中对齐" onclick="tableAlign()"/> <input type="button" name="Submit922" value=http://www.mamicode.com/"隔行变色" 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=http://www.mamicode.com/"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=http://www.mamicode.com/"checkbox" /></td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td><input type="checkbox" name="checkbox3" value=http://www.mamicode.com/"checkbox" /></td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td><input type="checkbox" name="checkbox4" value=http://www.mamicode.com/"checkbox" /></td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td><input type="checkbox" name="checkbox5" value=http://www.mamicode.com/"checkbox" /></td> <td>5</td> <td colspan="2">55</td> <td>5</td> </tr> <tr> <td><input type="checkbox" name="checkbox6" value=http://www.mamicode.com/"checkbox" /></td> <td>6</td> <td>6</td> <td>6</td> <td>56</td> </tr> <tr> <td><input type="checkbox" name="checkbox7" value=http://www.mamicode.com/"checkbox" /></td> <td>777</td> <td>7</td> <td>77</td> <td>7</td> </tr> <tr> <td><input type="checkbox" name="checkbox8" value=http://www.mamicode.com/"checkbox" /></td> <td>88</td> <td>8</td> <td>88</td> <td>77</td> </tr> <tr> <td><input type="checkbox" name="checkbox9" value=http://www.mamicode.com/"checkbox" /></td> <td>999</td> <td>99</td> <td>99</td> <td>999</td> </tr> <tr> <td><input type="checkbox" name="checkbox10" value=http://www.mamicode.com/"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=http://www.mamicode.com/"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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。