js 控制 table 上下行移动

最新推荐文章于 2022-09-14 00:49:58 发布
最新推荐文章于 2022-09-14 00:49:58 发布
阅读量90 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Feng-Scorpio/archive/2012/08/23/2651889.html
版权

<html>
  <head>    
    <title>lk.jsp</title>
    <script type="text/javascript">       
    var o1,o2;
    var o1a=new Array();
    var o2a=new Array();
    
    function switchTd(tr1,tr2){
     for(x=0;x<o1a.length;x++){  
      tr1.cells[x].innerHTML=o2a[x];  
      tr2.cells[x].innerHTML=o1a[x];           
     }
      tr1.cells[0].innerHTML=o1a[0]; 
      tr2.cells[0].innerHTML=o2a[0];     
      clickMouse(tr2);      
    }

     function SetRow(dir){    
     var o;
     var start=false;
     var num=0;
     var v_radio = document.getElementsByName("order_radio");
     for(var j=0;j<v_radio.length;j++){
        if(v_radio[j].checked){                
            o=v_radio[j];
            start=true;
            num=v_radio[j].parentNode.parentNode.rowIndex;
        }
      }
     if(!start){
      alert("请选择一个选项");return;
     }
     if(num<=1 && dir=="up"){
      alert("已经无法再向上");return;
     } 
     if(num>=(v_radio.length) && dir=="down"){
      alert("已经无法再向下");return;
     }
    
     var p = o.parentNode.parentNode;        
     var trs = document.getElementById("table_order").getElementsByTagName("tr");
     o1=trs[p.rowIndex]; 
     var tdLen=trs[p.rowIndex].cells.length;
     o1a.length=tdLen;
     o2a.length=tdLen;
     
     for(var i=0;i<tdLen;i++){
       o1a[i]=trs[p.rowIndex].cells[i].innerHTML;
       if(dir=="down"){
          o2a[i]=trs[p.rowIndex+1].cells[i].innerHTML;              
       }else{
         o2a[i]=trs[p.rowIndex-1].cells[i].innerHTML;              
       }
     }
     if(dir=="down"){
       o2=trs[p.rowIndex+1];          
     }else{
       o2=trs[p.rowIndex-1];         
     }
      switchTd(o1,o2);         
    }
    
      var v_tr = null;      
      function onMouse(obj){      
        if(obj.cells[obj.cells.length-1].childNodes[0].checked==false){
          obj.bgColor="#E6E6FA";
        }          
      }
      function outMouse(obj){
        if(obj.cells[obj.cells.length-1].childNodes[0].checked==false){
         obj.bgColor="";
        }          
      }
      function clickMouse(obj){        
        obj.cells[obj.cells.length-1].childNodes[0].checked=true;        
        obj.bgColor="#D8BFD8";
        if(v_tr!=null&&v_tr!=obj){
          v_tr.bgColor="";          
        }
        v_tr = obj;
      }        
     </script>    
  </head>  
  <body>
  <form name="form_order" action="lk_test.jsp" method="post">
  <table>
  <tr>
  <td>
        <table border="1" name="table_order" id="table_order" >
        <tr bgcolor="#9F9Fc0">
        <td>序号</td>
        <td>项目名称</td>
        <td>请选择</td>        
        </tr>            
        <tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
        <td>1<input type="hidden" name="orderid" value="1"/></td>
        <td>姓名<input type="hidden" name="dbid" value="1"></td>                                
        <td><input type="radio" name="order_radio" id="order_radio"/></td>
        </tr>            
        <tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
        <td>2<input type="hidden" name="orderid" value="2"/></td>
        <td>性别<input type="hidden" name="dbid" value="2"></td>                                
        <td><input type="radio" name="order_radio" id="order_radio"/></td>
        </tr>            
        <tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
        <td>3<input type="hidden" name="orderid" value="3"/></td>
        <td>E-MAIL<input type="hidden" name="dbid" value="6"></td>                                
        <td><input type="radio" name="order_radio" id="order_radio"/></td>
        </tr>            
        <tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
        <td>4<input type="hidden" name="orderid" value="4"/></td>
        <td>手机<input type="hidden" name="dbid" value="3"></td>                                
        <td><input type="radio" name="order_radio" id="order_radio"/></td>
        </tr>            
        <tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
        <td>5<input type="hidden" name="orderid" value="5"/></td>
        <td>电话<input type="hidden" name="dbid" value="4"></td>                                
        <td><input type="radio" name="order_radio" id="order_radio"/></td>
        </tr>            
        <tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
        <td>6<input type="hidden" name="orderid" value="6"/></td>
        <td>家庭住址<input type="hidden" name="dbid" value="5"></td>                                
        <td><input type="radio" name="order_radio" id="order_radio"/></td>
        </tr>            
        <tr onmouseover="onMouse(this);" onmouseout="outMouse(this);" onclick="clickMouse(this);">
        <td>7<input type="hidden" name="orderid" value="7"/></td>
        <td>邮编<input type="hidden" name="dbid" value="7"></td>                                
        <td><input type="radio" name="order_radio" id="order_radio"/></td>
        </tr>            
        </table>            
    </td>        
    <td>
    <input type="button" value="↑向上移动 "  onclick="SetRow('up');"/><br>
    <input type="button" value="↓向下移动 "  onclick="SetRow('down');"/>    
    </td>
    </tr>      
    </table>            
    <br><br>    
    <input type="submit" value=" 提交修改 "/>
    </form>    
  </body> 
</html>

感谢原创 http://www.blogjava.net/lcs/archive/2007/11/29/164043.html

转载于:https://www.cnblogs.com/Feng-Scorpio/archive/2012/08/23/2651889.html

dengluo20031120
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jsp表头相对固定的2种方法
04-13
利用css设置实现表头的固定效果，提供2种，一种横纵都可以固定，一种是单一固定横坐标
关于jsp页面表格表头固定，随着下拉条表头移动
lijunjie818的博客
08-18 6339
在项目中碰见jsp页面遍历数据过多，下拉后看不见表头，如果用easyUi就不存在固定表头问题了。 如果是单纯的table，遍历，那么我们可以引用bootstrap中的滚动监听来控制。 在页面引入            在body中引入                                                
Java表格Table冻结前几列或者前几行，其余行或列自由滑动。
帝魂Dreams
06-28 3824
Java表格Table冻结前几列或者前几行 实现对表格数据的头几行或者头几列进行冻结，即滚动时保持这几行/列不动，通过网上查找代码，参考已有的代码的思路，实现了可以任意对行、列进行冻结。 一、实现原理： 创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。 例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行...
Vue实现table上下移动功能示例
10-17
主要介绍了Vue实现table上下移动功能,结合实例形式分析了vue.js针对table表格元素动态操作相关实现技巧,需要的朋友可以参考下
js操作table行的上下移动，置顶置底
11-06
用js实现 表格行的表格，上移 ，下移，置顶，置底操作 直接引入js 快捷方便 支持ctrl键同时选择多行操作 支持选中行改变样式 支持行号显示 支持未选择行时移动提示
键盘上下键移动选择table表格行的js代码
01-19
//这是要操作的表格： 这是第一行 这是第二行 这是第三行 这是第四行 //这是操作表格的代码 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
jquery table 上下行移动互换
06-03
本知识点主要探讨如何使用jQuery实现表格（table）中行的上下移动互换功能。这一功能常用于数据管理界面，允许用户通过交互调整数据顺序。 首先，你需要确保已经下载并引入了jQuery库。通常，可以通过在HTML文件中...
Table中对tr的上下拖拽移动
weixin_30675967的博客
05-30 486
　　前天公司门户网站中新闻发布后写好的新闻想实现手动上下换位置。在网上找了一个专门为table写的js，有源码，可以自己改样式，动态效果。 正文开始： 首先需要引用一个js： jQuery.tableDnD = { /** Keep hold of the current table being dragged */ currentTable : null, ...
jsp页面数据的上移下移
04-12
简单易懂的jsp页面数据上下移动的代码，直接可以用的
js操作table中tr的顺序实现上移下移一行的效果
10-17
主要介绍了js操作table中tr的顺序实现上移下移一行的效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
用Javascript控制Table的行移动
Royi的博客
07-10 369
C#后台： 在LinkButton中加入Javascript： lnbUpA.Attribute.Add("onclick", "changeSortUp('trA'); return false;"); lnbDownA.Attribute.Add("onclick", "changeSortDown('trA'); return false;"); Javascript： functi
js table 行上移、下移
u011425213的专栏
07-22 3123
//使表格行上移，接收参数为链接对象 function moveUp(_a,orderId){  //通过链接对象获取表格行的引用 var _row=_a.parentNode.parentNode; //var curRow = null; var tdSeq = _row.rowIndex - 1; //如果不是第一行，则与上一行交换顺序 if(_row.previousSibl
js table操作 -------- 移动行
weixin_33701564的博客
12-07 374
http://jiarry.bokee.com/5368523.html这是一则简单的关于table排序，通过innerHTML互换td里的内容，从而达到排序的目的。主要是对JavaScript里innerHTML以及rowIndex以及DOM的一些应用。这个例子程序虽然简单，并且也有其他类似效果，但该例实用性较强，应用得当，能为界面增加不少活力。（后面...
javascript实现表格的上移下移删除
m0_60505147的博客
09-14 739
【代码】javascript实现表格的上移下移删除。
table的数据行tr上下移动
Ghost
03-14 4644
原文链接：http://www.cnblogs.com/taochen/articles/2344891.html 昨天帮别人解决一个前端页面表格里的数据行上下移动的前端效果，直奔google找了几个demo，发现demo是实现了效果，但是代码很多，最后还是决定自己用jquery写个吧， 首先将前端效果分析出编程逻辑，上下移动就是将数据行互换位置，互换为之前判断是否置顶或则最后一个，翻
table表格上移下移操作方法总结
LLL15003978801的博客
08-09 893
//上移函数 upGo = (dataSource, index) => { if (index != 0) { dataSource[index] = dataSource.splice(index - 1, 1, dataSource[index])[0]; } else { dataSource.push(dataSource.shift()); } }; //下移函数 downGo = (dataSource, index) => { if (index != dataSource.le
layui table 可编辑单元格 JS实现通过键盘上下左右键 光标焦点移动到旁边的编辑行/列
CaiXinXing的CSDN博客
05-20 3795
layui table 可编辑单元格 JS实现通过键盘上下左右键 光标焦点移动到旁边的编辑行/列 类似效果 上下左右键实现的代码 layui.config({ base: '/static/layuiadmin/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use(['index','table','form'],function(){ var $ = layui.jquery; var tab
vxe-table上下移动
最新发布
02-22
在vxe-table中，上下移动行是通过拖拽行实现的。 要实现行的上移动，你可以使用vxe-table提供的拖拽功能。首先，你需要在表格中启用拖拽功能，可以通过设置`drag-config`属性来实现。例如： ```html <vxe-table :...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值