jQuery实现table中的tr上下移动并保持序号不变

最新推荐文章于 2024-02-05 11:40:31 发布
最新推荐文章于 2024-02-05 11:40:31 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： javascript


jQueryMoveTr.html代码如下： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>jQuery-bhang</TITLE>
  <script type="text/javascript" src="jquery-1.6.2.js"></script>
  <script type="text/javascript" src="jquery-rlutil-1.6.2.js"></script>
 </HEAD>

 <BODY>
    <table id="show_table_id" border="1">
        <tr>
            <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="1" /></td>
            <td>aaaaaaaaaa</td>
            <td>@@@@@@@</td>
            <td align="center"><input type="button" name="btn1" value="↑" οnclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />   <input type="button" name="btn2" value="↓" οnclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
            <td>注释1</td>
        </tr>
        <tr>
            <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="2" /></td>
            <td>bbbbbbbbbbbbb</td>
            <td>#########</td>
            <td align="center"><input type="button" name="btn1" value="↑" οnclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />   <input type="button" name="btn2" value="↓" οnclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
            <td>注释2</td>
        </tr>
        <tr>
            <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="3" /></td>
            <td>cccccccccccc</td>
            <td>$$$$$$$$$$$$</td>
            <td align="center"><input type="button" name="btn1" value="↑" οnclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />   <input type="button" name="btn2" value="↓" οnclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
            <td>注释3</td>
        </tr>
        <tr>
            <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="4" /></td>
            <td>ddddddddddddd</td>
            <td>&&&&&&&&&&&&&</td>
            <td align="center"><input type="button" name="btn1" value="↑" οnclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />   <input type="button" name="btn2" value="↓" οnclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
            <td>注释4</td>
        </tr>
        <tr>
            <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="5" /></td>
            <td>eeeeeeeeeeeeee</td>
            <td>***************</td>
            <td align="center"><input type="button" name="btn1" value="↑" οnclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />   <input type="button" name="btn2" value="↓" οnclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
            <td>注释5</td>
        </tr>
    </table>
 </BODY>
</HTML>



jquery-rlutil-1.6.2.js代码如下：

 

* 功能：使带有序号的table表格中的tr内容上下移动并保持序号不变
 *
 * 函数使用要求：
 * 1、要求在使用此函数前必须先引用 jquery-1.6.2.js 文件
 * 2、上移按钮的name属性必须是 btn1，下移按钮的name属性必须是 btn2
 * 3、要有一个id=show_table_id的table元素，这个table元素里面放置n个tr套td的信息，其中有一个td的text是input框，input的value是序号值
 * 4、要求所有text内容为序号的td的class属性为 td_num
 *
 * @param: obj为一个button的对象
 * @param: table_self_id为table的id值
 * @param: td_self_id为内容是input序号框的td的class的属性值
 */
/上移指令
function prevMoveTrCommand(obj, table_self_id, td_self_id){
   *
    //不带表头的写法    
var $jqFirstTr = jQuery("#"+table_self_id+" tr:first-child");  
 //获得第一个tr的对象   
 var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val();   
//获得第一个tr里的input的value的序号    
var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();  
//获得本身tr的序号 带表头的写法
   var $jqFirstTr = jQuery("#"+table_self_id+" tr:nth-child(2)");  
/*获得第二个tr的对象*/
  var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val(); 
 /*获得第一个tr里的input的value的序号*/
  var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();
/*获得本身tr的序号*/
    
    if(objVal == firstTrVal){ 
   /*判断是否在把第一行向上移*/
      return;
    }else{
        prevMoveTrOpra(obj, td_self_id); 
     /*调用上移操作方法*/
  }
}
/*上移操作*/
function prevMoveTrOpra(obj, td_self_id){
    var $jqObj = jQuery(obj).parent().parent().clone(); 
    /*获得并复制本身tr的信息*/
    var $jqSublObj = jQuery(obj).parent().parent().prev();<span style="font-family: Arial, Helvetica, sans-serif;"> /*获得上一个tr的信息*/</span>
    $jqSublObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSublObj.find("."+td_self_id+" input:nth-child(1)").val())+1);<span style="font-family: Arial, Helvetica, sans-serif;"> /*把上一个tr序号加1*/</span>
    jQuery(obj).parent().parent().html("").append($jqSublObj.html());   <span style="font-family: Arial, Helvetica, sans-serif;"> /*把本身tr清空并插入上一个信息*/</span>
   
    $jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())-1);   
    /*把本身tr序号减1*/
    $jqSublObj.html("").append($jqObj.html());  
   /*把上一个tr清空并插入临时保存的tr信息*/
    $jqObj.remove();  /*删除复制的多余jQuery对象*/
}

   /*下移指令*/
    function nextMoveTrCommand(obj, table_self_id, td_self_id){
    var $jqLastTr = jQuery("#"+table_self_id+" tr:last-child");  <span style="font-family: Arial, Helvetica, sans-serif;">/*获得最后一个tr的对象*/</span>
     var lastTrVal = $jqLastTr.find("."+td_self_id+" input:nth-child(1)").val();   
     /*获得最后一个tr的序号*/
     var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val(); <span style="font-family: Arial, Helvetica, sans-serif;"> /*获得本身tr的序号*/</span>
    if(objVal == lastTrVal){  <span style="font-family: Arial, Helvetica, sans-serif;">/*判断是否想把最后一行往下移*/</span>
       return;
    }else{
        nextMoveTrOpra(obj, td_self_id);   <span style="font-family: Arial, Helvetica, sans-serif;">/*调用下移操作方法*/</span>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre">	</span> }</span>
}
  
/*下移操作*/
 function nextMoveTrOpra(obj, td_self_id){
    var $jqObj = jQuery(obj).parent().parent().clone();  <span style="font-family: Arial, Helvetica, sans-serif;"> /*获得并复制本身tr的信息*/</span>
     var $jqSiblObj = jQuery(obj).parent().parent().next();  <span style="font-family: Arial, Helvetica, sans-serif;"> /*获得下一个tr的信息*/   </span>
    $jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val())-1); <span style="font-family: Arial, Helvetica, sans-serif;">  /*把下一个tr序号减1*/</span>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
    jQuery(obj).parent().parent().html("").append($jqSiblObj.html()); <span style="font-family: Arial, Helvetica, sans-serif;">/*把本身tr清空并插入下一个tr信息*/</span>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
    $jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())+1);  <span style="font-family: Arial, Helvetica, sans-serif;">/*把本身tr序号加1*/</span>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
    $jqSiblObj.html("").append($jqObj.html()); <span style="font-family: Arial, Helvetica, sans-serif;">/*把下一个tr清空并插入临时保存的tr信息*/</span>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
    $jqObj.remove();   /*删除复制的多余jQuery对象*/
 }



jswension.html代码如下： 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>JavaScript拼接版</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  <script type="text/javascript" src="jquery-1.6.2.js"></script>
  <script type="text/javascript" src="jquery-rlutil-1.6.2.js"></script>

  <script type="text/javascript">
    
    [color=green]/*οnclick=prevMoveTrCommand(this,'show_table_id','td_num');  这个地方千万不要带空格，否则乱码*/[/color]
    jQuery(document).ready(function(){
        var str = "";
        str += "<tr>";
        str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='1' /></td>";
        str += "<td>aaaaaaaaaa</td>";
        str += "<td>@@@@@@@</td>";
        str += "<td align='center'><input type='button' name='btn1' value='↑' οnclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
        str += "  <input type='button' name='btn2' value='↓' οnclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
        str += "<td>注释1</td>";
        str += "</tr>";
        str += "<tr>";
        str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='2' /></td>";
        str += "<td>bbbbbbbbbbbbb</td>";
        str += "<td>#########</td>";
        str += "<td align='center'><input type='button' name='btn1' value='↑' οnclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
        str += "  <input type='button' name='btn2' value='↓' οnclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
        str += "<td>注释2</td>";
        str += "</tr>";
        str += "<tr>";
        str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='3' /></td>";
        str += "<td>cccccccccccc</td>";
        str += "<td>$$$$$$$$$$$$</td>";
        str += "<td align='center'><input type='button' name='btn1' value='↑' οnclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
        str += "  <input type='button' name='btn2' value='↓' οnclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
        str += "<td>注释3</td>";
        str += "</tr>";
        str += "<tr>";
        str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='4' /></td>";
        str += "<td>ddddddddddddd</td>";
        str += "<td>&&&&&&&&&&&&&</td>";
        str += "<td align='center'><input type='button' name='btn1' value='↑' οnclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
        str += "  <input type='button' name='btn2' value='↓' οnclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
        str += "<td>注释4</td>";
        str += "</tr>";
        str += "<tr>";
        str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='5' /></td>";
        str += "<td>eeeeeeeeeeeeee</td>";
        str += "<td>***************</td>";
        str += "<td align='center'><input type='button' name='btn1' value='↑' οnclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
        str += "  <input type='button' name='btn2' value='↓' οnclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
        str += "<td>注释5</td>";
        str += "</tr>";

        $("#show_table_id").html(str);
    });
        
  </script>
 </HEAD>

 <BODY>
    <table id="show_table_id" border="1"></table> 
 </BODY>
</HTML>


shen_yingkui
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现表头固定表格自滚动
existent
05-30 1318
随着阅览文章无数 终于让我找到了 废话不多说 上代码 我们可以看到,这里引用了一个本地的jquery.min.js文件,需要的小伙伴还请去百度上自行下载 接下来是js,没错,没有花里胡哨的css 仅仅是在div上面加了一个id <div id="scroll_table" class="col-md-12 bottom_half" > 以及tbody上加了一个id <tbody id="kbTable" > 这里说一下,是因为,有的小萌新只知道复制粘贴,也不看源码 <di
jQuery实现行上下移动并删除(顺序不变)
xiyang5530的专栏
03-08 165
  页面效果如下：     HTML代码如下：   &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;jQuery实现行上下移动并删除(顺序不变)&lt;/title&gt; &amp
【JavaScript源代码】jQuery实现表格行数据滚动效果.docx
12-30
jQuery实现表格行数据滚动效果 　　本文实例为大家分享了jQuery实现表格行数据滚动效果的具体代码，供大家参考，具体内容如下　　HTML代码：　　<div class="box">　　  <div class="box-header">　　    <div class="col">测试1</div>　　    <div class="col">测试2</div>　　    <div class="col">测试3</div>　　    <div class="col">测试4</div>　　  </div>　　  <div id="font-scroll">　　    <div clas
jQuery - 综合实例 - 固定表头，滚动表格内容
胡争辉
12-02 8773
jQuery - 综合实例 - 固定表头，滚动表格内容 [源代码]                                 $(document).ready(function () {                 for (var y = 1; y                     $("#table_y").append
jQuery实现表格数据无限滚动
又偷懒了的博客
07-22 1013
jQuery实现表格数据无限滚动
jquery实现表格无缝滚动
caimaomaocai的博客
03-03 4719
最近因为工作需要，写了好几个大屏展示的页面了。。因为这种只是一个单的页面，所以，还是选择用jq来写。。 然后发现滚动表格使用率真的高。自己也没怎么写过这种，趁着周末，做做练习。 css部分我是用的弹性布局 *{ margin:0; padding:0; } ul,li{ list-...
Jquery 关于table整行上下移动的代码
Douzi87的专栏
10-17 1129
上下移动table整行 JS.代码：  $('span').click(function () {    //鼠标点击 span                 var spanHTML = $(this).html();    //获得向上或向下箭头                 var $tr = $(this).parent().parent();    //获得当前那一行  
jQuery实现table中的tr上下移动并保持序号不变的实例代码
11-23
在本实例中，我们探讨如何使用jQuery来实现在表格（table）中移动<tr>行，并在移动过程中保持序号列的值不变。这个功能对于数据排序或者管理列表内容的交互体验非常有用。以下是对给定代码的详细解释： 首先，HTML...
基于jQuery替换table中的内容并显示进度条的代码
10-28
在这个示例中，我们将探讨如何使用jQuery将HTML表格（table）中的数值转换为直观的进度条，以增强数据展示的效果。这个例子特别适用于处理由asp.net GridView控件生成的表格数据。 首先，我们需要了解HTML结构。在...
jquery实现上下移动
05-15
本教程将详细讲解如何利用jQuery实现表格内容的上下移动功能，以及随之变动的序号更新。 一、jQuery基础 jQuery通过提供简洁的API，使得JavaScript代码更易于编写和理解。其核心概念包括选择器（用于选取DOM元素）...
jquery写表格（带滚动条）
最新发布
weixin_56381842的博客
02-05 239
jquery写表格（带滚动条）
Jquery实现表格header头随滚动条滚动而滚动
zhoupeng的专栏
11-06 4330
最近在做一个项目，功能已经实现，突然用户要求表头是浮动的（因为内容在同一页面展示，当滚动时，看不到列头）。由于功能已经实现使用jquery+纯html，为了改动少只能使用jquery原生态实现滚动。 html表头代码：     师资力量 科研
jQuery实现表格行数据滚动效果
qq_41927979的博客
07-29 1137
啥也不说了，直接整代码 HTML代码： <div class="box"> <div class="box-header"> <div class="col">位置</div> <div class="col">温度(℃)</div> <div class="col">湿度(%RH)</div> <div class="col">状态</div>
JQuery加载列表实现动画滚动（自上而下挤）
weixin_30897233的博客
01-18 347
　　这个例子是jquery动态加载列表，并通过定时刷新，实现其循环滚动效果的一个例子。 1、HTML代码： <div class="fake-table"> <li class="fake-table-hr"> <span>姓名</span> <span>地点</span>...
15款提高表格操作的jQuery插件
哲
12-21 996
table表格由于它的浏览器兼容性和复杂的标签嵌套方式，可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuer
jquery 固定和滚动表格
wwttqq85538649的专栏
12-02 794
<br />http://jonsion.javaeye.com/blog/757300<br /> <br /> 
Jquery实现table 1.拖拽选中(支持滚动) 2.定位到指定行 3.查看选中的选项
sugang666的博客
12-07 1770
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;table&lt;/title&gt; &lt;style type="text/css"&gt;
jquery实现table中tr或ul的li自动向上滚动效果
芃蓉蓁蓁的博客
06-22 2221
html: <div class="tbl-body" style="height:85%;overflow: hidden"> <div class="title">访问次数排名</div> <table> <thead> <tr> <td>序号</td> <td>名称</td>
jquery动态新增一行tr,实现序号排序
05-25
2. 在table的tbody中新增一行tr元素，并在其中添加td元素，第一个td元素用于显示序号。 ```html <tr> <td class="index"></td> 张三 <td>20 </tr> ``` 3. 使用jQuery的each方法遍历所有的行tr，依次给每个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值