很弱的js表格换行效果（表格移动行） 时间:2020-05-13 人气:0 <!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需刷新才能执行] 加载全部内容