js 脚本实现 上移下移功能

最新推荐文章于 2024-01-30 16:46:38 发布
最新推荐文章于 2024-01-30 16:46:38 发布
阅读量3.3k 收藏
点赞数
文章标签： 脚本 button input up xhtml table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiechunmei13/article/details/5656852
版权

<!--复制代码可直接运行-->
 <!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 上移下移</title>
<script type="text/javascript">
function test1(id)
{
var row = document.getElementById(id).parentElement.parentElement.rowIndex;
if(row==1){
alert(' 当前最大值，无需上移');
}else{
//上一行的名称列值
var htm1=document.getElementById("tab").rows[row-1].cells[1].innerHTML;
// 当前行的名称列值
var htm2=document.getElementById(id).parentElement.parentElement.cells[1].innerHTML;
document.getElementById("tab").rows[row-1].cells[1].innerHTML=htm2;
document.getElementById(id).parentElement.parentElement.cells[1].innerHTML=htm1;
}
}
function test2(id)
{
//或得到当前行的行号
var row = document.getElementById(id).parentElement.parentElement.rowIndex;
//或 得到table的总行数
var count=document.getElementById("tab").rows.length;
//if 当前行的行号等于table的总行数则不进行下移
if(row==(count-1)){
alert('当前最小值，无需下移');
}else{
// 下一行的名称列值
var htm1=document.getElementById("tab").rows[row+1].cells[1].innerHTML;
// 当前行的名称列值
var htm2=document.getElementById(id).parentElement.parentElement.cells[1].innerHTML;
// 当前行的名称列的值为下一行的值
document.getElementById("tab").rows[row+1].cells[1].innerHTML=htm2;
// 下一行的值被赋值为当前行的值
document.getElementById(id).parentElement.parentElement.cells[1].innerHTML=htm1;
}
}
</script>
</head>
<body>
<form action="#" method="post">
<table width="200" border="1" id="tab">
<tr>
<td>序号</td>
<td>名 称</td>
<td>编辑</td>
</tr>
<tr>
<td>1</td>
<td>name1</td>
<td>
<input id="up1" type="button" name="up1" οnclick="test1('up1');" value="上移">
<input id="down1" type="button" name="down" onClick="test2('down1');"value="下移">
</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>    <input id="up2" type="button" name="up1" οnclick="test1('up2');" value="上移">
<input id="down2" type="button" name="down" onClick="test2('down2');"value="下移"></td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
<td>    <input id="up3" type="button" name="up1" οnclick="test1('up3');" value="上移">
<input id="down3" type="button" name="down" onClick="test2('down3');"value="下移"></td>
</tr>
<tr>
<td>4</td>
<td>name4</td>
<td>     <input id="up4" type="button" name="up" οnclick="test1('up4');" value="上移">
<input id="down4" type="button" name="down" onClick="test2('down4');"value="下移"></td>
</tr>
<tr>
<td>5</td>
<td>name5</td>
<td>    <input id="up5" type="button" name="up1" οnclick="test1('up5');" value="上移">
<input id="down5" type="button" name="down" onClick="test2('down5');"value="下移"></td>
</tr>
<tr>
<td>6</td>
<td>name6</td>
<td>     <input id="up6" type="button" name="up1" οnclick="test1('up6');" value="上移">
<input id="down6" type="button" name="down" onClick="test2('down6');"value="下移"></td>
</tr>
<tr>
<td>7</td>
<td>name7</td>
<td>  <input id="up7" type="button" name="up1" οnclick="test1('up7');" value="上移">
<input id="down7" type="button" name="down" onClick="test2('down7');"value="下移"></td>
</tr>
<tr>
<td>8</td>
<td>name8</td>
<td>     <input id="up8" type="button" name="up1" οnclick="test1('up8');" value="上移">
<input id="down8" type="button" name="down" onClick="test2('down8');"value="下移"></td>
</tr>
<tr>
<td>9</td>
<td>name9</td>
<td>    <input id="up9" type="button" name="up1" οnclick="test1('up9');" value="上移">
<input id="down9" type="button" name="down" onClick="test2('down9');"value="下移"></td>
</tr>
</table>
</form>
</body>
</html>

xiechunmei13
关注
基于js实现数组相邻元素上移下移
10-15
在实现数组元素的上移和下移功能时，主要涉及到数组元素的交换操作。 首先，理解数组元素交换的基本原理是关键。在JavaScript中，可以使用基本的赋值操作来交换两个变量的值，例如通过临时变量或者数学方法等。但是...
js实现Select列表各项上移和下移的方法
10-23
本文将详细介绍如何使用 JavaScript 实现 Select 列表中的选项上移和下移功能，这对于动态调整列表顺序，尤其是用户自定义排序的场景十分有用。 首先，我们需要理解 Select 元素在 HTML 中的作用。Select 元素用于...
JS实现一个列表中包含上移下移删除等功能
10-25
一个项目，包括了一个列表页其中包括在列表中实现上移，下移，删除等功能，为了用户体验，操作均使用JS实现
上移、下移功能
u012339998的专栏
01-10 1084
实现数据的上移和下移功能 实现效果如下： 功能实现过程为：上移和下移是交换两条数据的位置序号。我将主要业务放在Service，具体操作放在Dao中。 上移的Service层代码： public void moveUp(Long id) { //找出相关的Forum:当前需要移动的板块 Forum forum = getById(id...
JS实现上移下移功能
ykblog.github.io
12-14 3819
下面代码可直接运行  上移下移 function test1(id) { var row = document.getElementById(id).parentElement.parentElement.rowIndex; if(row==1){ alert(' 当前最大值，无需上移'); }else{ //上一行的名称列值 var htm1=document
【JavaScript】 ---- 数组元素的上移、下移、置顶
止于至善
08-16 2434
1. 上移或者下移都是使用 temp 变量获取当前位置的元素； 2. 当前位置获取需要移动方向位置的元素【前一个或者后一个位置的元素】； 3. 移动方向位置获取 temp 变量的值，完成元素的替换； 4. 置顶采用变量 temp 获取当前位置元素，other 获取其他位置元素值； 5. 将 temp 和 other 拼接，这里可以使用 unshift, concat等实现。
js上移,下移
xniYa的博客
07-10 309
【代码】js上移,下移。
jQuery表格行上移下移和置顶的实现方法
10-23
本篇文章主要介绍了如何使用jQuery来实现网页表格中数据行的动态上移、下移以及置顶操作。这些操作能够帮助我们在前端直接通过用户交互完成数据的顺序调整，同时配合简单的动画效果，使操作过程更加生动有趣。该方法...
上移下移代码
06-10
上移或下移这些资源文件的引用可能会改变页面的加载顺序，影响到样式应用和脚本执行的时间。 综上所述，"上移下移代码"涉及到编程中的多个层面，包括但不限于代码逻辑、程序结构、控制流程、前端交互、数据库操作...
js模仿google265导航模块上移、下移功能
05-12
内容索引:脚本资源,Ajax/JavaScript,模块,层移动　js模仿google265导航模块上移、下移功能，163CSS作品，获取更多请直接进入该站。 　本演示示例实现网页上的各个模块点击鼠标后上移或者下移，其它模块自动填补，...
JS技术实现动态置顶、置底、上移、下移
08-07
使用JS技术实现数据行的动态置顶、置底、上移、下移
js表格行上移下移置顶置底
12-19
支持所有浏览器，包过IE6-8,支持多选行操作，支持不连续选择行表格操作，操作按钮单独分开的。
JS实现的表格操作类详解(添加，删除，排序，上移，下移)
10-23
主要介绍了JS实现的表格操作类,可实现针对表格的添加,删除,排序,上移,下移等操作,具有一定参考借鉴价值,需要的朋友可以参考下
js如何实现列表数据的上移和下移？以及置顶、置底功能
weixin_52099241的博客
06-21 3696
首先，调用list.splice(index - 1, 1, list[index])方法，这个方法会从list数组中删除第index-1个元素，并用第index个元素替换它。这个方法的作用是将list数组中的第index个元素和第index-1个元素交换位置，也就是将第index个元素上移一位。这个方法的作用是将list数组中的第index个元素和第index+1个元素交换位置，也就是将第index个元素下移一位。使用splice方法实现下移的原理和上移类似，只是要将当前位置的元素和下一位的元素交换。
js做的上移，下移
I love IT
02-24 259
function upList(){ //向上排序 var span = document.getElementById("trIds"); //得到要排序的tr所在的span，当然也可以设置要排序的tr的name。 var form = document.forms[0]; alert("form-===...
js 对象数组实现 上移、下移、置顶、置底操作
最新发布
哇咔咔
01-30 1178
使用的时候，先导入要使用的方法，再将原数据深拷贝一份，再操作如。
js上移下移控件
如鹿渴慕泉水的专栏
11-23 580
效果图 附上源代码: (function ($) { function movebleTableinit(srcelement) { this.mydefault = { srctargetele: $(srcelement), addButtonSelector: "#a
上移下移实现逻辑
wuguofei12345的博客
08-06 2616
在开发中经常有上移、下移的操作，猛的一想感觉逻辑还很复杂，其实很简单主要有以下步骤： 首先页面上的展示列表在后台查询的时候要根据某个字段排序，这样展示的数据才是有序的，才可以实现此功能。 添加上移或者下移的时候需要把当前数据的ID和目标ID传到后台 后台排序的字段互换值，到前台后需要重新加载列表。 前台代码： $.each(json, function(index, item) { ...
js简单实现数据上移、下移、置顶、置底
大把小米的博客
06-16 3838
如图，要实现这种效果可以使用js的数组api 1.上移 upGo(fieldData, index) { if (index != 0) { fieldData[index] = fieldData.splice(index - 1, 1, fieldData[index])[0]; } else { fieldData.push(fieldData.shift()); } }, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值