Js操作表格-对表格单元格的添加删除修改
生活随笔
收集整理的這篇文章主要介紹了
Js操作表格-对表格单元格的添加删除修改
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
動態表格
動態表格徹底研究
對表格單元格的添加刪除修改并對其進行移動以及拷貝等操作，是目前應用開發中常用的技術
| 1 | 1 | 1 | 1 | |
| 2 | 2 | 2 | 2 | |
| 3 | 3 | 3 | 3 | |
| 4 | 4 | 4 | 4 | |
| 5 | 55 | 5 | ||
| 6 | 6 | 6 | 56 | |
| 777 | 7 | 77 | 7 | |
| 88 | 8 | 88 | 77 | |
| 999 | 99 | 99 | 999 | |
| 10 | 10 | 10 | 10 | |
?
?
?
?
<!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> <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> </body> </html>總結
以上是生活随笔為你收集整理的Js操作表格-对表格单元格的添加删除修改的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript DOM inner
- 下一篇： js运动动画的八个知识点