上下移动单元格

最新推荐文章于 2023-05-20 18:23:37 发布
最新推荐文章于 2023-05-20 18:23:37 发布
阅读量1.5k 收藏
点赞数
分类专栏： Javascript 文章标签： function input button javascript table html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/brave1/article/details/394071
版权

<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
test114
</title>
</head>
<body bgcolor="#ffffff">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
var Main_Tab = null;//定义全局变量Main_Tab，使之指向固定表“ExTable”。以后可以使用表对象。
var dragColStart = 0;//初始化拖拽起始表列与结束表列
var dragColEnd = 0;
function ini()
{
Main_Tab = ExTable;  //指向固定表
}
function Changeit(table,startRow,endRow,col,flag)    //交换表中的两列，需要遍历每一行，然后交换每一个元素。因为没有表列对象。
{
if(flag=='down')
{
  for (var i=endRow;i>=startRow;i--)
  table.rows[i+1].cells[col].innerText=table.rows[i].cells[col].innerText;
  table.rows[i+1].cells[col].innerText="";
}
else
{
for (var i=startRow;i<=endRow;i++)
table.rows[i-1].cells[col].innerText=table.rows[i].cells[col].innerText;
table.rows[i-1].cells[col].innerText="";
}
}
function down()
{var startRow=Number(document.all('startext').value);
 
 
  var endRow=Number(document.all('endtext').value);
  var col=Number(document.all('col').value);
 Changeit(Main_Tab,startRow,endRow,col,'down');
}
function up()
{var startRow=Number(document.all('startext').value);
 var endRow=Number(document.all('endtext').value);
  var col=Number(document.all('col').value);
 Changeit(Main_Tab,startRow,endRow,col,'up');
}
</SCRIPT>
</head>
<body οnlοad=ini()>
为方便用户操作，最好在表单中标出行列！！
<p>对 第 <input type="text" name="col" value="" size="4"/> 列
从 第<input type="text" name="startext" value="" size="4"/> 行
&nbsp;到 第<input type="text" name="endtext" value="" size="4"/> 行
<input type="button" name="down" οnclick="down()" value="下移" />
<input type="button" name="up" οnclick="up()" value="上移" />
</p>
<p>
 
<table border=1 id="ExTable">
<tr>
<td  id="td1">Row00</td>
<td  id="td2">Row01</td>
<td  id="td3">Row02</td>
<td id="domospan" class="ab" style="position:absolute;background:#f4f4f4;filter:alpha(opacity=50);display:none"></td>
</tr>
<tr>
 <td>Row10</td>
 <td>Row11</td>
 <td>Row12</td>
</tr>
<tr>
 <td>Row20</td>
 <td>Row21</td>
 <td>Row22</td>
</tr>
<tr>
 <td>Row30</td>
 <td>Row31</td>
 <td>Row32</td>
</tr>
<tr>
 <td>Row40</td>
 <td>Row41</td>
 <td>Row42</td>
</tr>
<tr>
 <td>Row50</td>
 <td>Row51</td>
 <td>Row52</td>
</tr>
<tr>
 <td>Row60</td>
 <td>Row61</td>
 <td>Row62</td>
</tr>
<tr>
 <td>Row70</td>
 <td>Row71</td>
 <td>Row72</td>
</tr>
<tr>
 <td>Row80</td>
 <td>Row81</td>
 <td>Row82</td>
</tr>
<tr>
 <td>Row90</td>
 <td>Row91</td>
 <td>Row92</td>
</tr>
<tr>
 <td>&nbsp</td>
 <td>&nbsp</td>
 <td>&nbsp</td>
</tr>
<tr>
 <td>&nbsp</td>
 <td>&nbsp</td>
 <td>&nbsp</td>
</tr>
</table>
</p>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------

     为方便用户操作，最好在表单中标出行列！！

对 第 列从 第 行  到 第 行

Row00Row01Row02
Row10Row11Row12
Row20Row21Row22
Row30Row31Row32
Row40Row41Row42
Row50Row51Row52
Row61Row62
Row60Row71Row72
Row70Row81Row82
Row80Row91Row92
Row90  
   

-----------------------------------------------------------------------------------------------------------------------------------

brave1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML表格行上下移动,jQuery表格行上下移动(带过渡效果)
weixin_39747075的博客
06-03 805
/*整个方法说明：比如将第5行上移到第4行，也就是把这两行交换一下位置。一、先复制第5行[opOccupy]插入到第3行与第4行之间，表格就多了一行： 1 2 3 5的复制 4 5 6。但复制出来的行[opOccupy]高度为0，所以网页上看不出来多的一行。二、复制行[opOccupy]的高度慢慢变高，直到正常高度。而本身的第5行高度慢慢变小，直到0，这样就会把夹在中间的第4行慢慢挤下来。三、再次...
jQuery实现table中的tr上下移动并保持序号不变的实例代码
10-21
在本文中，我们将深入探讨如何使用jQuery来实现表格（table）中tr元素的上下移动功能，同时保持表内的序号不变。这个实例适用于那些需要动态调整数据顺序的Web应用程序，例如，用户可以通过点击按钮轻松地调整列表项...
html上下键移动单元格,如何用键盘的上下键盘来移动 表格的每一行
weixin_34462581的博客
06-21 564
无标题文档#tb1 td{background:#ccc;padding:3px;border:1px solid #999;}a1a2a3b1b2b3c1c2c3d1d2d3e1e2e3f1f2f3编辑内容：$(document).keydown(keyCtrl);var obj=$("#tb1").children().children();var h=0,l=0;var maxh=obj.s...
如何使用键盘快捷键上下移动Jupyter笔记本单元格
weixin_44105701的博客
05-12 3332
Jupyer notebook使用技巧
vsto range 单元格向上下左右移动几个单元格
最新发布
nbspzs的专栏
05-20 112
【代码】vsto range 单元格向上下左右移动几个单元格。
datagridview实现上下移动
ad13adsa的博客
06-18 705
上移 private void buttonX7_Click(object sender, EventArgs e) { if (this.dataGridViewX1.SelectedRows[0] == null) { return; } i...
检测模块的任务---上下移动单元格
vivid的技术专栏
06-22 1312
test114 function Changeit(startRow,endRow,col,flag)    //交换表中的两列，需要遍历每一行，然后交换每一个元素。因为没有表列对象。{    if(flag==down)   {     if(document.all.ExTable.rows[endRow+1].cells[col].firstChild.value!="")    {al
C# dataGridView上下移动选中行
热门推荐
編程愛好的专栏(球)
04-24 1万+
/*DataGridView 实现行[Row]的上下移动,我这里用到了SelectedRows[0],而没用CurrentRow是有原因的    主要是这两段代码:    dataGridView1.Rows[rowIndex - 1].Selected = true;    dataGridView1.Rows[rowIndex].Selected = false;    这两行代码大家
net datagridview 多行上下移动代码
weixin_49998777的博客
03-29 573
。.net datagridview 多行上下移动代码 Public Sub UpDGV(ByVal dgv As DataGridView) '上移函数 Try Dim dgvsrc As DataGridViewSelectedRowCollection = dgv.SelectedRows '获取选中行的集合 If dgvsrc.Count > 0 Then Dim index_R ...
layui table 光标根据上下左右按键在table中移动并选中单元格内容
Mr_ZhangAdd的博客
06-01 1455
layui table 光标根据上下左右按键在table中移动
js操作table行的上下移动，置顶置底
11-06
本文将深入探讨如何使用JavaScript实现表格行的上下移动、置顶和置底功能，以及相关辅助操作。 首先，`js操作table行的上下移动，置顶置底`这个主题涉及到的主要技术是DOM操作，事件监听和数组处理。DOM（Document ...
js表格刷新、全选、全不选、添加、拷贝、上下移动、删除行功能实现
08-12
本示例主要涉及了六个关键功能：表格的刷新、复选框的全选与全不选、行的添加、拷贝、上下移动以及删除。以下是对这些功能的详细解释： 1. **表格刷新**： 刷新表格通常是为了更新表格中的数据，这可能是因为后台...
easyui datagrid中实现上下左右、回车切换单元格
12-14
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
VB编写的利用控件的left和top属性实现控件上下左右移动的代码
10-12
本篇文章将深入探讨如何利用`Left`和`Top`属性来实现控件的上下左右移动，并提供一种简单易懂的编程方法。 首先，我们需要理解`Left`和`Top`属性的工作原理。`Left`属性决定了控件左边缘与容器左边缘之间的距离，而...
定义Tab键的顺序
vivid的技术专栏
06-14 3857
定义Tab键的顺序：（1）默认Tab顺序（2）清零Tab设置（3）自定义Tab顺序需要解决的问题：(1)初始时按照默认的Tab顺序来(2)自定义时，最后一个按Tab或者enter都能跳到下一行//试验一test24function keyPress(the){ key=window.event.keyCode; if (key==40 || key==13) {//enter ----13    
在页面上addrow,deleteRow
vivid的技术专栏
06-22 3745
function addRow(){     var thead = main_table.getElementsByTagName("Thead")[0];   var tbody=main_table.getElementsByTagName("tbody")[0];  var elm = thead.firstChild.cloneNode(true);  elm.style.display
concat方法完成javascript中数组的复制
vivid的技术专栏
06-16 3419
//初始化数据var array_1   = new Array();    //定义一个数组array_1[0]    = 123;array_1[1]    = new Array();array_1[1][0] = 456;array_1[1][1] = 789;array_1[2]    = "xxx";alert(array_1)                  //赋值完毕//赋值数
clone方法完成javascript中数组的复制
vivid的技术专栏
06-16 2199
function Array.prototype.clone(){ var tmp=new Array(); for(ob in this)tmp[ob]=this[ob]; return tmp;}var array_1 = new Array();array_1[2] = 1;array_1[3] = 2;var array_2 = array_1.clone();//, ,1,2al
qtableweidget 上下移动
05-15
qtablewidget是一个非常常用的Qt控件，用于显示表格数据。在某些情况下，我们需要在qtablewidget中实现上下移动数据的功能。 要实现这个功能，我们可以借助qtablewidget的drap and drop功能。具体步骤如下： 1. 将qtablewidget中要上下移动的数据设为可以拖拽的（dragEnabled）。 2. 在qtablewidget的某一行中按下鼠标左键，并拖曳该行数据到目标位置。 3. 松开鼠标左键，完成拖曳操作。此时目标位置会出现一个可放置的位置指示器。 4. 将拖曳的行放置到指示器所在位置即可完成上下移动。 除了使用drag and drop功能，我们还可以通过编写代码实现上下移动。具体步骤如下： 1. 获取当前选中的行或单元格（selectedItems）。 2. 判断当前选中的行或单元格是否是表格中的第一行或最后一行。如果是，则无法上下移动。 3. 获取当前选中行或单元格的索引（row，column）。 4. 如果要上移，将当前选中行或单元格的数据与上一行的数据交换位置。然后选中上一行并将焦点移动到上一行。 5. 如果要下移，将当前选中行或单元格的数据与下一行的数据交换位置。然后选中下一行并将焦点移动到下一行。 上下移动表格数据是qtablewidget中常见的功能，这里提供了两种实现方式。具体实现方法可以根据实际需求进行选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值