正文 

当前位置： 首页 > 程序 > java教程

前端页面添加表格，实现每一行能上下移动，还可修改数据库排序字段值(代码片段)

zhhy zhhy     2023-01-07     499

关键词： 

var up = "<a href="javascript:void(0)" onclick="moveUp(this)">上移</a>";
                var down = "<a href="javascript:void(0)" onclick="moveDown(this)">下移</a>";



<tr id="tr_"+i><td>data[i].templateName+templateString+temOrderNum</td>
<td>up+"&nbsp;&nbsp;&nbsp;"+down</td>
</tr>


   /*
    表格整行上下移动
    */
    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 val1=node1.firstChild.lastChild.value;
           var val2=node2.firstChild.lastChild.value;
           node1.firstChild.lastChild.value=val2;
           node2.firstChild.lastChild.value=val1;
        //获取父结点
        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);

 

页面中查询模块的设计与实现思路

在做一个物品的展示管理页面，想把增删改查都放到页面中，用axure画了一个页面，比较简单，主要分为上下两部分，上半部分是查询模块，下半部分是表格，用来展示数据。新增按钮单独在页面中，修改按钮在表的每一行数据... 查看详情

js数组移动上移下移置顶置底，vue实现表格上下移动置底置顶

...就是index2=index+1往上移动就是index2=index+1；这个也可以在页面试试那个方法就指导了，但是置顶和置底还有点差别*/varswapItems=function(arr,index1,index2,direction){if 查看详情

如何添加链接以编辑和删除使用php制定的表格中的每一行

】如何添加链接以编辑和删除使用php制定的表格中的每一行【英文标题】：Howtoaddalinktoeditanddeleteeachrowinatableformulatedusingphp【发布时间】：2021-01-0718:56:15【问题描述】：我编写了输出php表的php代码，并且对于每一行，我希望能够... 查看详情

这一定是前端excel导出的天花板~

参考技术A前端导出Excel的方案有很多，但是能够导出一份专业的Excel表格很少，本文将介绍一款导出Excel表格界的天花板，能够满足99.99%的业务需求，直呼yyds!xlsx是前端最热门的Excel导出方案，又叫做SheetJS，默认不支持修改Excel的... 查看详情

js表格的每一行都有一个按钮点击按钮修改当前行某一列的信息

...行。参考技术A1、首先，新建一个测试网页，网页中主要添加有可视控件表格<table>和按钮<button>。2、要实现点击 查看详情

我想使用 html 在表格的每一行旁边添加一个复选框 [关闭]

】我想使用html在表格的每一行旁边添加一个复选框[关闭]【英文标题】：Iwanttoaddacheckboxbesideeachrowinatableusinghtml[closed]【发布时间】：2012-08-0602:32:14【问题描述】：如何使用html在表格中的每一行旁边添加一个复选框。如何使用以... 查看详情

python测试开发django-173.bootstrap实现table表格行内编辑(代码片段)

...占满一格2.最后一列添加删除按钮3.可以点添加一行按钮前端实现基于bootstrap框架<html><head><title>table表格行内编辑</title><linkhref="/static/bootstarp/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="... 查看详情

delphi能实现dbgrid一行表格显示两行文字；即一行表格的文字可以换行。怎么实现？

DBGrid貌似不能这样的！不过，推荐你用EHLIB控件里的DBGrIDEh或者DevexpressVCL这两个控件里的GRID都是支持多行自动换行的！参考技术Adbgrid不行用DEVExpressVCL的cxgrid能做到 查看详情

jquery为表格行添加上下移动画效果(代码片段)

为项目列表项添加上下移动动画。首先想使用jqueryanimate来做到这一点。但我用的是table和tr作为列表和列表项，但jquery动画方法不支持table里的tr（Animationsarenotsupportedontablerows.）。所以设法用其他解决方案。最后使用jq方法配合CSS... 查看详情

selenium+pageobject+java实现测试用例

...装成一个对象。对页面的操作写成一个方法。好处在于当前端ui修改后，我们不需要到每一个测试用例上修改，只需要修改页面对应的类即可。下面针对知乎登陆实 查看详情

vue+element-ui前端项目一table表格并实现分页2

阅读目录效果展示0安装axios1引入tableVue组件main.js2网页布局底部信息栏一直展示页面底部App.vue3导航组件添加Table表格导航NavMenu.vue4element-ui表格组件并实现分页tableVue.vue4.1第一步：根据每页要显示的条数来设置，关联分页代码的... 查看详情

如何设置标题，以便在添加新行时表格中的每一行都已输入标题？

】如何设置标题，以便在添加新行时表格中的每一行都已输入标题？【英文标题】：Howdoyousetatitlesothateveryrowinatablehasthetitlealreadytypedinwhenyouaddanewrow?【发布时间】：2009-05-0417:01:03【问题描述】：我正在使用Core-Data应用程序，我希... 查看详情

如何在表格视图单元格（每一行）中添加文本字段并为每个文本字段设置标签以访问它的文本

】如何在表格视图单元格（每一行）中添加文本字段并为每个文本字段设置标签以访问它的文本【英文标题】：howtoaddtextfieldintableviewcell(eachrow)andsettagtoeachtextfieldtoaccessit\'stext【发布时间】：2012-04-1512:00:11【问题描述】：如何在... 查看详情

java分页实现

首先我们要清楚java分页的思路第一我们要明白前端页面需要向java后台传递当前页码数以及每页显示多少条数据第二java后台代码需要向前端页面传递每页显示的数据,以及总条数以及总页数  代码如下: 首先我们要创建... 查看详情

AngularJS动画在表格中交换行

...：2015-10-1200:20:34【问题描述】：我正在尝试在我的应用中添加动画。这是一个带有行的表格，每一行都可以修改/删除或移动。这是诀窍，我可以在表格中的行之间移动项目，但我无法在此动作上放置动画（反转，交换）。我根... 查看详情

表格怎么设置每一列自动求和

...着的空白区域，按以上操作，即可实现参考技术A方法1、表格软件中选定拟求和区域→【公式】工具栏功能区→【自动求和】→求和，每列的求和结果会自动显示在列尾的下一行中方法2,、鼠标放在每列列尾的下一行单元，按【al... 查看详情

android实现复杂table表格合并单元格？

...w对象，或一个View控件。当为TableRow对象时，可在TableRow下添加子控件，默认情况下，每个子控件占据一列。当为View时，该View将独占一行。2、TableLayout行列数的确定       TableLayout的行数由开发人员直接指定，即有多少个TableR... 查看详情

用空行重复每一行 n 次 - 谷歌表格

...oogleSheets)非常相似，但是，我还希望在每个重复元素之间添加n个空行。示例列：NameDogCatBall------所需的输出：Ou 查看详情