JS实现的表格行上下移动操作示例

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JS实现向表格行添加新单元格的方法

    本文实例讲述了JS实现向表格行添加新单元格的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以想表格中指定id的行插入新的单元格 <!DOCTYPE html> <html> <head> <script> function insCell() { var x=document.getElementById('tr1').insertCell(0); x.innerHTML="The famous"; } </script&

  • JS实现鼠标点击展开或隐藏表格行的方法

    本文实例讲述了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/xhtm

  • 动态添加删除表格行的js实现代码

    复制代码 代码如下: <html><head><script language="javascript">  //窗口表格增加一行  function addNewRow(){   var tabObj=document.getElementById("myTab");//获取添加数据的表格   var rowsNum = tabObj.rows.length;  //获取当前行数   var colsNum=tabObj.row

  • js动态修改表格行colspan列跨度的方法

    本文实例讲述了js动态修改表格行colspan列跨度的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script> function setColSpan() { var x=document.getElementById('myTable').rows[0].cells; x[0].colSpan="2"; x[1].colSpan="6"; } </sc

  • JS组件Bootstrap Table表格行拖拽效果实现代码

    JS组件Bootstrap Table表格行拖拽效果实现代码

    一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2

  • JS动态增删表格行的方法

    本文实例讲述了JS动态增删表格行的方法.分享给大家供大家参考,具体如下: function insertRow(tableName,className,bgcolor, cellContentArray){ var t = document.getElementByIdx(tableName); //取得table表 var tr = t.insertRow(); //插入一行 tr.className=className; //设置行的css tr.bgcolor=bgcolor; //设置行

  • 原生JS和JQuery动态添加、删除表格行的方法

    本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

  • 键盘上下键移动选择table表格行的js代码

    键盘上下键移动选择table表格行的js代码

    //这是要操作的表格: 这是第一行 这是第二行 这是第三行 这是第四行 //这是操作表格的代码 var rowNo= -1; var tableId = 'tb'; var inputId = 'show'; var selectedColor = "#FF0000" function document.onkeydown() { //事件的标识代码 if (event.keyCode == 38) { for(var k=0;k [Ctrl+A 全选 注:如需引入外部Js需刷新才能执

  • JavaScript Select和Option列表元素上下左右移动

    JavaScript Select和Option列表元素上下左右移动

    作者 马嘉楠 New Document var currentSel = null; function move(){ if(arguments.length==1){ moveUp(arguments[0]); }else if(arguments.length==2){ moveRight(arguments[0],arguments[1]); } } function moveUp(direction){ if(currentSel == null) return; var index =

  • 基于JavaScript实现动态创建表格和增加表格行数

    在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>

  • js实现鼠标经过表格行变色的方法

    本文实例讲述了js实现鼠标经过表格行变色的方法.分享给大家供大家参考.具体实现方法如下: <script type=text/javascript> <!-- (function(){ var rows = document.getElementById("listdata"); var add = function(){ this.style.backgroundColor="#f3f3f1"; }; var del = function(){

随机推荐