JavaScript操作table(添加、删除、上移、下移、交换)
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
<!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); } } //设置选中行的背景色 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的子节点 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); } } //使表格行上移,接收参数为链接对象 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); } //使表格行下移 接收参数为链接对象 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); } //定义通用的函数交换两个节点的位置 function swapNode(node1, node2) { //获取父节点 var _parent = node1.parentNode; //获取两个节点的相应位置 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); } } //移动行,参数:要操作的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控件添加到数组中 arr.push(el[i], el[i].checked); } myTable.moveRow(a, b); //对数组中所有元素获得对象并对引用的对象赋原值 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>选项内容</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 编辑过 |
关键字查询
相关文章
正在查询... |