jq完成表格单元格顺序的上移下调

半路独行 半路独行     2022-08-14     785

关键词:

如有指教及疑问,欢迎留言

 HTML代码

 1    <table class="exampletable">
 2                         <thead>
 3                             <tr>
 4                                 <th>单元格</th>
 5                                 <th>操作</th>
 6                             </tr>
 7                         </thead>
 8                         <tbody>
 9                             <tr>
10                                 <td><input type="text" name="name" value="单元格一" /></td>
11                                 <td>
12                                     <button class="orderindex upindex" data-index="-1">上移</button>
13                                     <button class="orderindex downindex" data-index="1">下降</button>
14                                 </td>
15                             </tr>  
16                              <tr>
17                                 <td><input  type="text" name="name" value="单元格二" /></td>
18                                 <td>
19                                     <button class="orderindex upindex" data-index="-1">上移</button>
20                                     <button class="orderindex downindex" data-index="1">下降</button>                
21                                 </td>
22                             </tr>
23                             <tr>
24                                 <td><input type="text" name="name" value="单元格三" /></td>
25                                 <td>
26                                     <button class="orderindex upindex" data-index="-1">上移</button>
27                                     <button class="orderindex downindex" data-index="1">下降</button>
28                                 </td>
29                             </tr>
30                         </tbody>
31                     </table>

JQ代码

 1     $(".exampletable tbody").on(click, .orderindex, function () {
 2         var $thistr = $(this).parents("tr").first();
 3         var $thistbodytr = $(this).parents("tbody").find(tr)
 4         var nowindex = $thistbodytr.index($thistr)
 5         var content = "<tr>" + $thistr.html() + "</tr>";
 6         var indexstep = parseInt($(this).attr("data-index"))
 7         var lastindex = nowindex + indexstep;
 8         var $tr = $thistbodytr.eq(lastindex);
 9         ($(this).hasClass("upindex") == true) ? $(content).insertBefore($tr) : $(content).insertAfter($tr);
10         $thistr.remove();
11     });

 此代码没有考虑首单元格不能上移及尾单元格不能下调的问题.

 ps(纯凑字数):菜鸟一枚,今天专门为了这个问题搜了挺久,发现,简单的问题往往被写的很复杂,代码本来就是追求简介明了,不需要绕弯子,为何只需要举个简单的列子,加一些代码说明就可以解决的问题,却是在开篇的时候就用大堆的代码显示自己的厉害!以此为戒,今后的学习和笔记,力求简洁的代码,清晰地思路(均在能力之内)!

如何在不重新加载表格的情况下调整表格单元格内的标签大小?

】如何在不重新加载表格的情况下调整表格单元格内的标签大小?【英文标题】:HowcanIresizealabelwithinatablecellwithoutreloadingtable?【发布时间】:2016-11-0500:25:56【问题描述】:我有一个表格,单元格有一个标签,我希望能够直接更新... 查看详情

xCode,按距离顺序的表格视图单元格

】xCode,按距离顺序的表格视图单元格【英文标题】:xCode,tableviewcellsindistanceorder【发布时间】:2012-06-0720:18:32【问题描述】:在我的应用程序中,我正在尝试在距设备的距离范围内自行创建表格视图!所以假设我在表格中有20行... 查看详情

如何组织表格视图单元格

】如何组织表格视图单元格【英文标题】:howtoorganizetableviewcells【发布时间】:2018-07-1612:03:07【问题描述】:我在一个表格视图中有两种不同类型的表格视图单元格。第一个单元格将原始cmets打印到帖子中,第二个单元格将cmets... 查看详情

htmlhtml表格③(合并单元格|跨行合并|跨列合并|单元格合并顺序|跨行设置rowspan属性|跨列设置colspan属性)(代码片段)

...元格顺序3、合并单元格流程二、合并单元格示例1、原始表格2、跨行合并单元格3、跨列合并单元格一、合并单元格1、合并单元格方式单元格合并方式:跨行合并:垂直方向上的上下单元格合并是跨行合并,在<td>单元格标签中使... 查看详情

如何按字母顺序对表格视图单元格进行排序

】如何按字母顺序对表格视图单元格进行排序【英文标题】:howtosortatableviewcellalphabetically【发布时间】:2018-01-1607:19:12【问题描述】:我有一个由数组填充的日期视图单元格,我需要添加两个按钮,一个用于A到Z,另一个用于Z... 查看详情

ios表格视图单元格按行索引顺序加载图像

】ios表格视图单元格按行索引顺序加载图像【英文标题】:iostableviewcellloadimagesintheorderofrowindex【发布时间】:2015-01-1909:21:03【问题描述】:在表格视图中配置单元格,我使用-(void)setImageWithURLRequest:(NSURLRequest*)urlRequestplaceholderImage... 查看详情

TableView - 单元格的上移和下移功能

】TableView-单元格的上移和下移功能【英文标题】:TableView-MoveupandMovedownfunctionalityofacell【发布时间】:2015-05-0509:18:07【问题描述】:我有一个TableView的情况。我正在尝试实现一个允许向上或向下移动单元格的功能。向上或向下移... 查看详情

如何在完成处理程序Swift中为表格视图单元格赋值

】如何在完成处理程序Swift中为表格视图单元格赋值【英文标题】:HowtoassignvaluetotableviewcellincompletionhandlerSwift【发布时间】:2021-08-0118:03:53【问题描述】:可能会因为我对完成以及如何正确使用它们的无知而提出这个问题,但是... 查看详情

wps表格双击不能自动填充

...输入公式:=A1&B1。6.单击Enter并向下填充公式时,可以完成数字和字母的逐序填充。参考技术A以WPS2019版本为例:关于WPS表格,您可使用WPS参考下述步骤完成操作:单独使用「鼠标左键」在「单元格右下角」待鼠标变为「黑色... 查看详情

以编程方式开始在另一个表格视图单元格中编辑 UITextField

...我在每个单元格中有一个UITableView和一个UITextField。当我完成每个文本字段的编辑后,我想以编程方式开始编辑下一个按时间顺序排列的单元格中的文本字段。在fu 查看详情

html5-表格

...添加属性colspan,然后把数字为2的单元格删除,列合并就完成了。数字为1和2的单元格分别在不同的行中所以是进行了行合并,因为只需要合并两个单元格所以rowspan的值为2,行合并只需要在数字为3的单元格中添加属性rowspan,然... 查看详情

重新排序单元格后如何更改获取结果控制器数组中对象的顺序

...lls【发布时间】:2015-03-3021:57:33【问题描述】:我有一个表格视图,我刚刚实现了一个可以帮助我重新排列单元格的类,就像表格视图委托附带的常规移动单元格方法一样。现在,在对单元格重新排序后, 查看详情

使用 Core Data 重新排列 TableView 单元格的顺序

...0521:47:07【问题描述】:我有一个自定义UITableView类来处理表格视图的动画,并且已经使用在表格视图中显示的Array测试了以下代码。tableView.didMoveCellFromIndexPathToIndexPathBlo 查看详情

Twitter Bootstrap 在表格单元格上使用 collapse.js [几乎完成]

】TwitterBootstrap在表格单元格上使用collapse.js[几乎完成]【英文标题】:TwitterBootstrapUsecollapse.jsontablecells[AlmostDone]【发布时间】:2013-04-2916:17:40【问题描述】:我正在处理列出交易(贷记和借记)的帐户页面。我希望用户能够点击... 查看详情

htmlhtml表格总结★★★(表格标签|行标签|单元格标签|表格标签属性|表头单元格标签|表格标题标签|合并单元格)(代码片段)

文章目录一、表格标签组成(表格标签|行标签|单元格标签)二、table表格属性(border属性|align属性|width属性|height属性)三、表头单元格标签四、表格标题标签五、合并单元格1、合并单元格方式2、合并单元格顺序3、合并单元格流程六... 查看详情

smratbi电子表格加序号

转至元数据结尾转至元数据起始概述其他通常用于电子表格报表进行排序、结果集筛选和是否使用Smartbi产品本身设置的显示值。只有数据列字段才可以进行其他设置。功能入口1、选中数据列字段所在单元格,点击工具栏的属性... 查看详情

iOS - 键盘显示时顶部单元格从屏幕上移开

】iOS-键盘显示时顶部单元格从屏幕上移开【英文标题】:iOS-topcellsmovedupawayfromthescreenwhenkeyboardshows【发布时间】:2019-04-2502:52:49【问题描述】:这是键盘显示之前:这是键盘显示后:这就是我想要的:如果有足够的消息,则将所... 查看详情

向每个表格视图单元格添加数字 - iOS

】向每个表格视图单元格添加数字-iOS【英文标题】:Addnumberstoeachtableviewcell-iOS【发布时间】:2014-02-0119:37:47【问题描述】:在我的应用程序中,我想通过按数字顺序添加数字来显示表格视图中有多少个单元格。例如,我希望表... 查看详情