这篇文章主要介绍了 JS 实现的表格行上下移动操作, 涉及 javascript 针对页面元素节点与属性的相关操作技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 JS 实现表格行上下移动操作的方法。分享给大家供大家参考,具体如下:
- <!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>
- <table width="200" border="1">
- <tbody>
- <tr>
- <td width="25%">
- 1
- </td>
- <td width="25%">
- 11
- </td>
- <td width="25%">
- <a href="javascript:void(0)" onclick="moveUp(this)">
- 上移
- </a>
- </td>
- <td width="25%">
- <a href="javascript:void(0)" onclick="moveDown(this)">
- 下移
- </a>
- </td>
- </tr>
- <tr>
- <td>
- 2
- </td>
- <td>
- 22
- </td>
- <td>
- <a href="javascript:void(0)" onclick="moveUp(this)">
- 上移
- </a>
- </td>
- <td>
- <a href="javascript:void(0)" onclick="moveDown(this)">
- 下移
- </a>
- </td>
- </tr>
- <tr>
- <td>
- 3
- </td>
- <td>
- 33
- </td>
- <td>
- <a href="javascript:void(0)" onclick="moveUp(this)">
- 上移
- </a>
- </td>
- <td>
- <a href="javascript:void(0)" onclick="moveDown(this)">
- 下移
- </a>
- </td>
- </tr>
- <tr>
- <td>
- 4
- </td>
- <td>
- 44
- </td>
- <td>
- <a href="javascript:void(0)" onclick="moveUp(this)">
- 上移
- </a>
- </td>
- <td>
- <a href="javascript:void(0)" onclick="moveDown(this)">
- 下移
- </a>
- </td>
- </tr>
- <tr>
- <td>
- 5
- </td>
- <td>
- 55
- </td>
- <td>
- <a href="javascript:void(0)" onclick="moveUp(this)">
- 上移
- </a>
- </td>
- <td>
- <a href="javascript:void(0)" onclick="moveDown(this)">
- 下移
- </a>
- </td>
- </tr>
- </tbody>
- </table>
- <script type="text/javascript">
- < !--
- function moveUp(_a) {
- var _row = _a.parentNode.parentNode;
- //如果不是第一行,则与上一行交换顺序
- var _node = _row.previousSibling;
- while (_node && _node.nodeType != 1) {
- _node = _node.previousSibling;
- }
- if (_node) {
- swapNode(_row, _node);
- }
- }
- function moveDown(_a) {
- var _row = _a.parentNode.parentNode;
- //如果不是最后一行,则与下一行交换顺序
- var _node = _row.nextSibling;
- while (_node && _node.nodeType != 1) {
- _node = _node.nextSibling;
- }
- if (_node) {
- swapNode(_row, _node);
- }
- }
- 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插入到原来node2的位置
- if (_t2) _parent.insertBefore(node1, _t2);
- else _parent.appendChild(node1);
- }
- //-->
- </script>
- </body>
- </html>
运行效果截图如下:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0331/263826.html