jquery 对table中tr上下移动的控制

最新推荐文章于 2020-08-21 22:52:30 发布
最新推荐文章于 2020-08-21 22:52:30 发布
阅读量511 收藏
点赞数
分类专栏： jQuery 文章标签： jquery table tr 上移下移 置顶置底 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daizhaoyunit3/article/details/84218265
版权 

<html>
<head>
<title>jquery表格操作</title>
<script language="javascript" src="jquery.table.tr.js"></script>
</head>
<body>
            <a href="#" οnclick="add_line();">添加一行</a>
&nbsp;&nbsp;<a href="#" οnclick="remove_line();">删除一行</a>
&nbsp;&nbsp;<a href="#" οnclick="up_exchange_line();">上移</a>
&nbsp;&nbsp;<a href="#" οnclick="down_exchange_line();">下移</a>
&nbsp;&nbsp;<a href="#" οnclick="top_exchange_line();">置顶</a>
&nbsp;&nbsp;<a href="#" οnclick="hou_exchange_line();">置底</a>
<table>
<tr><td>序号</td><td>步骤名称</td><td>步骤描述</td><td>相关操作</td></tr>
</table>
<table id="content">
</table>
</body>
</html>
<script language="javascript">
var currentStep=0;
var max_line_num=0;
function add_line(){
  max_line_num=$("#content tr:last-child").children("td").html();
  if(max_line_num==null) {
    max_line_num=1;
  }
  else{
    max_line_num=parseInt(max_line_num);
	max_line_num+=1;
  }
  $('#content').append("<tr id='line"+max_line_num+"' οnclick='lineclick(this);'><td>"+max_line_num+"</td><td>打开网页"+max_line_num+"</td><td>打开登录网页"+max_line_num+"</td><td>删除&nbsp;&nbsp;编辑</td></tr>");
}
function remove_line(){ 
  if(currentStep==0){
    alert('请选择一项!');
	return false;
  }
  $("#content tr").each(
    function(){
	  var seq=parseInt($(this).children("td").html());
	  if(seq==currentStep) $(this).remove();
	  if(seq>currentStep) $(this).children("td").each(function(i){if(i==0)$(this).html(seq-1);});
	}
  );
  currentStep=0;
}

function top_exchange_line(){
  if(currentStep==0){
    alert('请选择一项!');
	return false;
  }
  if(currentStep<=1){
     alert('非法操作!');
	 return false;
  }
  var topStep = 1;
   //修改序号
  $('#line'+topStep+" td:first-child").html(currentStep);
  $('#line'+currentStep+" td:first-child").html(topStep);
  //取得两行的内容
  var topContent=$('#line'+topStep).html();
  var currentContent=$('#line'+currentStep).html();
  $('#line'+topStep).html(currentContent);
  //交换当前行与首行内容
  $('#line'+currentStep).html(topContent);  
  $('#content tr').each(function(){$(this).css("background-color","#ffffff");});
  $('#line'+topStep).css("background-color","yellow"); 
  currentStep=topStep;
}

function hou_exchange_line(){
 if(currentStep==0){
    alert('请选择一项!');
	return false;
 }
 if(currentStep>=max_line_num){
     alert('非法操作!');
	 return false;
  }
  var nextStep=max_line_num;
  //修改序号
  $('#line'+nextStep+" td:first-child").html(currentStep);
  $('#line'+currentStep+" td:first-child").html(nextStep);
  //取得两行的内容
  var nextContent=$('#line'+nextStep).html();
  var currentContent=$('#line'+currentStep).html();
  $('#line'+nextStep).html(currentContent);
  //交换当前行与尾行内容
  $('#line'+currentStep).html(nextContent);  
  $('#content tr').each(function(){$(this).css("background-color","#ffffff");});
  $('#line'+nextStep).css("background-color","yellow"); 
  currentStep=nextStep;
}

function up_exchange_line(){ 
  if(currentStep==0){
    alert('请选择一项!');
	return false;
  }
  if(currentStep<=1){
     alert('非法操作!');
	 return false;
  }
  var upStep=currentStep-1;
  //修改序号
  $('#line'+upStep+" td:first-child").html(currentStep);
  $('#line'+currentStep+" td:first-child").html(upStep);
  //取得两行的内容
  var upContent=$('#line'+upStep).html();
  var currentContent=$('#line'+currentStep).html();
  $('#line'+upStep).html(currentContent);
  //交换当前行与上一行内容
  $('#line'+currentStep).html(upContent);  
  $('#content tr').each(function(){$(this).css("background-color","#ffffff");});
  $('#line'+upStep).css("background-color","yellow"); 
  currentStep=upStep;
}
function down_exchange_line(){
 if(currentStep==0){
    alert('请选择一项!');
	return false;
 }
 if(currentStep>=max_line_num){
     alert('非法操作!');
	 return false;
  }
  var nextStep=parseInt(currentStep)+1;
  //修改序号
  $('#line'+nextStep+" td:first-child").html(currentStep);
  $('#line'+currentStep+" td:first-child").html(nextStep);
  //取得两行的内容
  var nextContent=$('#line'+nextStep).html();
  var currentContent=$('#line'+currentStep).html();
  $('#line'+nextStep).html(currentContent);
  //交换当前行与上一行内容
  $('#line'+currentStep).html(nextContent);  
  $('#content tr').each(function(){$(this).css("background-color","#ffffff");});
  $('#line'+nextStep).css("background-color","yellow"); 
  currentStep=nextStep;
}
function lineclick(line){
   $('#content tr').each(function(){$(this).css("background-color","#ffffff");});
   var seq=$(line).children("td").html();
   $(line).css("background-color","yellow");
   currentStep=seq;
}
 
</script>
 
daizhaoyunit3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery操作表格（附源码）实现tr上下移动。
03-21
基于JQuery的操作表格附源码，实现html中table的tr的添加、删除以及上下移动。
jQuery实现table中的tr上下移动并保持序号不变的实例代码
10-21
下面小编就为大家带来一篇jQuery实现table中的tr上下移动并保持序号不变的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery实现tr元素的上下移动
css470895871的专栏
12-20 2827
table { background:#949494; width:400px; line-height:20px;} td { border-right:1px solid gray; border-bottom:1px solid gray; } function up(obj) {     var objParentTR = $(obj).parent().parent
jquery 控制table tr 上下移动
微风帆扬
01-15 915
对产品进行排序， 控制table tr 上下移动，贴出来，可能有些朋友会用到。 //下移 function nextMoveTr(obj) { var row = $(obj).parent().parent(); var next = row.next(); if ( next.length
jquery实现tr元素的上下移动示例代码
韬晦潜胖蛇的专栏
02-20 2415
table { background:#949494; width:400px; line-height:20px;} td { border-right:1px solid gray; border-bottom:1px solid gray; } function up(obj) { var objParentTR = $(obj).parent().parent
jQuery实现table中的tr上下移动并保持序号不变
03-27
NULL 博文链接：https://shihuan830619.iteye.com/blog/1169666
JQuery实现table中tr上移下移的示例(超简单)
12-29
<table> <tr> <td><input type=button value=上移 onclick=moveUp(this)/> <td><input type=button value=下移 onclick=moveDown(this)/> </tr> <tr> <td><input type=button value=上移 ...
table的tr行移
weixin_34319111的博客
07-12 188
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table的tr行移</title> <style> .my_tab{ ...
table tr的上下移动
Dchyun001的专栏
05-22 663
jquery表格操作             添加一行   删除一行   上移   下移   置顶   置底 序号步骤名称步骤描述相关操作 var currentStep=0; var max_line_num=0; function ad
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： 标题一 标题二 标题三 标题标题标题标题标题标题标题标题标题四
jquery做的table行上下移动，互换
05-23
jquery做的table行上下移动，互换,简单有效，非常的实用
jQuery实现表格行上下移动和置顶效果
10-24
本文给大家分享的是一款由jQuery实现的表格行上下移动以及置顶效果的代码，非常的简单实用，这里给出了核心代码，有需要的小伙伴可以参考下。
js操作table中tr的顺序实现上移下移一行的效果
10-17
主要介绍了js操作table中tr的顺序实现上移下移一行的效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
js表格上下移动添加删除
weixin_30417487的博客
04-12 236
html部分 <div onclick='fn()'>加</div> <table width="250" border="1" > <tbody id="div"> <tr> <td width="25%">1</td> <td width="25...
js连续滚动(上下左右)
小兔子的专栏
11-05 1730
 这种滚动代码简单，效果也不错，但唯一的缺点就是滚动对象的长或宽不够时，它就停止运行“罢工”了上base href="http://www.lami.cn">div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>div id=demo1> 定义图片 -->img sr
js操作table中tr的顺序，实现上移下移一行的效果
weixin_39037804的博客
09-29 562
总体思路是在table外部加个div，修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex，在table中删除掉，然后循环table的rows，到了...
table 上移 下移行示例（在网上看到的例子）
weixin_30700977的博客
05-21 77
<!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> ...
JQ实现Table的tr上移下移功能
xiaolu1014的博客
08-21 1419
今日份需求：实现表格行的上移下移，并更新排序值，效果如下： 话不多说直接上代码，JQ实现挺简单的 HTML代码 <div> <span> <button class="layui-btn" id="doUp">上移</button><button class="layui-btn" id="doDown">下移</button> &lt
点击按钮来实现上下tr排序呢
最新发布
06-08
要实现点击按钮来实现上下tr排序，可以按照以下步骤进行： 1. 给上下排序按钮添加点击事件，获取当前点击的按钮类型（上/下）。 2. 获取当前选中的行，并根据按钮类型进行排序。 3. 根据排序结果，重新渲染表格。 下面是一个示例代码： HTML： ``` <table id="myTable"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>男</td> </tr> <tr> <td>王五</td> <td>20</td> <td>女</td> </tr> </tbody> </table> <button id="upBtn">上移</button> <button id="downBtn">下移</button> ``` jQuery： ``` $(function() { // 给上下排序按钮添加点击事件 $('#upBtn, #downBtn').click(function() { var type = $(this).attr('id') == 'upBtn' ? 'up' : 'down'; // 获取当前点击的按钮类型 var selected = $('#myTable tbody tr.selected'); // 获取当前选中的行 if (selected.length) { if (type == 'up') { selected.prev().before(selected); // 上移 } else { selected.next().after(selected); // 下移 } } // 重新渲染表格 $('#myTable tbody tr').removeClass('selected'); $('#myTable tbody tr:odd').addClass('odd'); $('#myTable tbody tr:even').addClass('even'); }); // 给表格内容添加点击事件 $('#myTable tbody tr').click(function() { $(this).addClass('selected').siblings().removeClass('selected'); }); }); ``` 该代码实现了点击按钮来实现上下tr排序的功能，并且支持对选中的行进行上下移动。需要注意的是，该代码只支持对相邻的行进行移动，对于非相邻的行需要进行相应的处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值