首页 > 网络编程 > JavaScript > 网页特效 > 页面背景 > js表格换行 很弱的js表格换行效果（表格移动行） 2012-11-15 11:15:09 作者： 很弱的js表格换行效果（表格移动行），可以将表格的一行向上或向下移动，主要是学习dom之表格控制操作 <!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> </p> <table width="300" style="font-size:12px" border="3" align="center" cellpadding="5" cellspacing="3" bordercolor="#FFFFFF" bgcolor="#99CC66" id="table1"> <tr> <td width="25%" align="center" bgcolor="#FFFFCC">1</td> <td width="25%" align="center" bgcolor="#FFFFCC">11</td> <td width="25%" align="center" bgcolor="#FFFFCC"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td> <td width="25%" align="center" bgcolor="#FFFFCC"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td> </tr> <tr> <td align="center" bgcolor="#FFFFCC">2</td> <td align="center" bgcolor="#FFFFCC">22</td> <td align="center" bgcolor="#FFFFCC"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td> <td align="center" bgcolor="#FFFFCC"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td> </tr> <tr> <td align="center" bgcolor="#FFFFCC">3</td> <td align="center" bgcolor="#FFFFCC">33</td> <td align="center" bgcolor="#FFFFCC"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td> <td align="center" bgcolor="#FFFFCC"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td> </tr> <tr> <td align="center" bgcolor="#FFFFCC">4</td> <td align="center" bgcolor="#FFFFCC">44</td> <td align="center" bgcolor="#FFFFCC"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td> <td align="center" bgcolor="#FFFFCC"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td> </tr> <tr> <td align="center" bgcolor="#FFFFCC">5</td> <td align="center" bgcolor="#FFFFCC">55</td> <td align="center" bgcolor="#FFFFCC"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td> <td align="center" bgcolor="#FFFFCC"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td> </tr> </table> <script language="javascript" type="text/javascript"> <!-- 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.nodeValue)) node.parentNode.removeChild(node); } } //获得表格对象 var _table=document.getElementById("table1"); cleanWhitespace(_table); //使表格行上移，接收参数为链接对象 function moveUp(_a){ //通过链接对象获取表格行的引用 var _row=_a.parentNode.parentNode; //如果不是第一行 交换顺序 if(_row.previousSibling)swapNode(_row,_row.previousSibling); } //使表格行下移 接收参数为链接对象 function moveDown(_a){ //通过链接对象获取表格行的引用 var _row=_a.parentNode.parentNode; //如果不是最后一行 则与下一行交换顺序 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); } //--> </script> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:JS控制表格隔行变色javascript实现table表格隔行变色的方法js实现鼠标经过表格行变色的方法原生JS操作网页给p元素添加onclick事件及表格隔行变色一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox高效的表格行背景隔行变色及选定高亮的JS代码JS实现的表格行上下移动操作示例键盘上下键移动选择table表格行的js代码js实现表格的隔行变色和上下移动
