JavaScript操作table(添加、刪除、上移、下移、交換)
當前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <script type="text/javascript"> //添加一行 function add() { var tbody = document.getElementById("tbody"); var rowNo = tbody.rows.length; tbody.insertRow(rowNo); tbody.rows[rowNo].insertCell(0); tbody.rows[rowNo].cells[0].appendChild(document.createTextNode(rowNo + 1)); //innerText = "0001";//innerText 和innerHTML tbody.rows[rowNo].insertCell(1); tbody.rows[rowNo].cells[1].innerHTML = "<input name='radioRMS' type='radio' value='1'></input>"; tbody.rows[rowNo].insertCell(2); tbody.rows[rowNo].cells[2].innerHTML = "<input name='checkboxRMS' type='checkbox' value='1'></input>"; tbody.rows[rowNo].insertCell(3); tbody.rows[rowNo].cells[3].innerHTML = "<input name='descript' type='text' value='des"+ (rowNo + 1) + "'></input>"; tbody.rows[rowNo].insertCell(4); tbody.rows[rowNo].cells[4].innerHTML = "<input type='button' value='刪除' onclick='deleteRow(event)'/><a href='javascript:void(0)' onclick='moveUp(this)'>上移</a><a href='javascript:void(0)' onclick='moveDown(this)'>下移</a>"; tbody.rows[rowNo].onclick = changeActiveRow; } //刪除一行 function deleteRow(eve) { if (confirm("確認刪除")) { element = window.event ? window.event.srcElement : eve.target; var rowNo = element.parentNode.parentNode.rowIndex; var tbody = document.getElementById("tbody"); tbody.deleteRow(rowNo - 1); } } //設(shè)置選中行的背景色 var currentActiveRow; function changeActiveRow() { eve = arguments[0]; element = window.event ? window.event.srcElement : eve.target; obj = element.parentNode; while (obj && obj.tagName != "TR") { obj = obj.parentNode; } if (currentActiveRow) currentActiveRow.style.backgroundColor = ""; currentActiveRow = obj; currentActiveRow.style.backgroundColor = "Red"; } //////////////// ///移動行 //////////////// function cleanWhitespace(element) { //遍歷element的子節(jié)點 for (var i = 0; i < element.childNodes.length; i++) { var node = element.childNodes[i] if (node.nodeType == 3 && !/\s/.test(node.nodue)) node.parentNode.removeChild(node); } } //使表格行上移，接收參數(shù)為鏈接對象 function moveUp(_a) { //獲得表格對象 var _table = document.getElementById("tbody"); cleanWhitespace(_table); //通過鏈接對象獲取表格行的引用 //var _row = _a.parentNode.parentNode; var _row = currentActiveRow; //如果不是第一行 交換順序 if (_row.previousSibling) swapNode(_row, _row.previousSibling); } //使表格行下移 接收參數(shù)為鏈接對象 function moveDown(_a) { //獲得表格對象 var _table = document.getElementById("tbody"); cleanWhitespace(_table); //通過鏈接對象獲取表格行的引用 //var _row = _a.parentNode.parentNode; var _row = currentActiveRow; //如果不是最后一行 則與下一行交換順序 if (_row.nextSibling) swapNode(_row, _row.nextSibling); } //定義通用的函數(shù)交換兩個節(jié)點的位置 function swapNode(node1, node2) { //獲取父節(jié)點 var _parent = node1.parentNode; //獲取兩個節(jié)點的相應位置 var _t1 = node1.nextSibling; var _t2 = node2.nextSibling; //將node2插入到原來node1的位置 if (_t1) _parent.insertBefore(node2, _t1); else _parent.appendChild(node2); //將node1插入到原來ndoe2的位置 if (_t2) _parent.insertBefore(node1, _t2); else _parent.appendChild(node1); } ////////// ///以下方式僅支持IE ///////// //上移 function moveUpIE() { var myTable; var Elm = event.srcElement; while (Elm && Elm.tagName != "TR") { Elm = Elm.parentElement; } x = Elm.rowIndex; myTable = Elm.parentElement; //移到下一行 if (x < myTable.rows.length - 1) { moveCell(myTable, x, x - 1); } } //下移 function moveDownIE() { var myTable; var Elm = event.srcElement; while (Elm && Elm.tagName != "TR") { Elm = Elm.parentElement; } x = Elm.rowIndex; myTable = Elm.parentElement; //移到下一行 if (x < myTable.rows.length - 1) { moveCell(myTable, x, x + 1); } } //移動行，參數(shù)：要操作的table，要相互移動的行a，b function moveCell(myTable, a, b) { var el = myTable.all.tags("input") var arr = []; //遍歷所有input控件 for (i = 0; i < el.length; i++) { if (el[i].type == "checkbox") //對所有checkbox控件添加到數(shù)組中 arr.push(el[i], el[i].checked); } myTable.moveRow(a, b); //對數(shù)組中所有元素獲得對象并對引用的對象賦原值 while (arr.length > 0) arr.shift().checked = arr.shift(); } </script> </head> <body> <table border="1" id="tableSpan"> <thead id="thead"> <tr onclick="changeActiveRow(this);"> <td>序號</td> <td>缺省</td> <td>啟用</td> <td>選項內(nèi)容</td> <td>操作</td> </tr> </thead> <tbody id="tbody"> </tbody> </table> <button onclick="add()" value="添加">添加</button> <button onclick="moveUp()" value="添加">_↑_</button> <button onclick="moveDown()" value="添加">_↓_</button> </body> </html> 該文章在 2010/8/18 1:07:34 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
