JS实现上移下移功能

最新推荐文章于 2021-06-03 03:12:23 发布
最新推荐文章于 2021-06-03 03:12:23 发布
阅读量76 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/yangkai-cn/archive/2012/12/14/4017322.html
版权 
    下面代码可直接运行
 
<!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>

转载于:https://www.cnblogs.com/yangkai-cn/archive/2012/12/14/4017322.html

weixin_30539625
关注
JS控制HTMLDOM表格行上下移动
03-19
NULL 博文链接：https://shirleyit.iteye.com/blog/717864
js实现上移、下移置顶
high_height的博客
11-21 3985
html>head>meta charset="utf-8">meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> title>使用js实现上移、下移、置顶、置底功能及源码案例title>meta name="description" content=""> meta name="keyw
jquery 实现列表上移、下移功能
小菜鸟的博客
02-03 1万+
由于比较忙，好久没写新的文章了，虽然本人写的文章可能对一些高手来说是小菜一碟，但是对于新手来说还是比较难得，重在为和我一样的小菜鸟提供一个简单的实现方法，以及一个思路罢了。        那么，废话少说，我们开始进入主题。       今天我们实现的是一个列表页面上移、下移功能。如图：        当勾选列表中的列时，点击上移或者下移，会动态上移或者下移。 html代码如下：
这个例子是上移下移按钮功能
古寒居
09-03 574
这个例子是上移下移功能 [code="java"] 无标题文档 姓名 数学 历史 外语 总分 &nbsp; ...
Html+Css+Js图片放大可缓慢和移动（完整代码+详解）
qq_38170526的博客
08-02 2163
一，问题描述 当鼠标移动到图片上时，对应的大图片悬浮在鼠标的附近位置，而且移入的时候，图片时缓慢加载的，直到大图片被完全加载完成。当鼠标已经移入图片上时，以偶定的同时大图片也跟着移动。 二，效果预览 三，用到的主要事件 onmouseover：鼠标略过事件 onmouseout：鼠标移出事件 onmousemove：鼠标移动事件 window.onload：页面加载事件 四，遇到的问...
利用jqgrid实现上移下移单元格功能
10-17
在本文中，我们将深入探讨如何使用jqGrid，一个基于jQuery的表格插件，来实现单元格的上移和下移功能。jqGrid提供了一种高效且灵活的方式来展示和操作表格数据，包括与服务器端的数据交互。当我们需要调整表格中数据...
基于js实现数组相邻元素上移下移
10-15
在实现数组元素的上移和下移功能时，主要涉及到数组元素的交换操作。 首先，理解数组元素交换的基本原理是关键。在JavaScript中，可以使用基本的赋值操作来交换两个变量的值，例如通过临时变量或者数学方法等。但是...
JS实现点击上移下移LI行数据的方法
10-23
这篇教程主要讲解了如何使用JS实现点击上移下移LI行数据的功能，这在创建交互式列表，如任务列表或者菜单栏时非常实用。下面将详细阐述实现这个功能的关键步骤和涉及的JavaScript技术。 首先，我们需要理解HTML结构...
JS实现一个列表中包含上移下移删除等功能
10-25
**下移功能**：与上移类似，只是需要找到后一个列表项并插入到当前项之后： ```javascript document.querySelectorAll('.moveDownBtn').forEach(btn => { btn.addEventListener('click', function(e) { e....
js实现数组内数据的上移和下移的实例
10-19
本文所要探讨的实例就是如何使用JavaScript实现数组中数据的上移和下移操作。通过这个实例，可以加深对JavaScript数组操作API的理解，并能应用于实际的项目开发中。 首先，我们需要了解数组在JavaScript中的基本...
JQuery操作html实现<li>标签上移和下移效果
热门推荐
易大师不易
03-17 1万+
1.为了方便操作元素，先定义一个css样式如： .optli{color:greee;} 2.将ul绑定（注册）点击事件 $('#ulName').on('click','li',nodeContent);                  //li点击事件 var nodeContent=function(){     $(this).addClass('optli').sibling
js上移下移功能
susuzhe
03-15 4283
今天分享一下项目里面用到的一个小功能，实现上移下移的功能。 上移 下移 上移 下移 上移 下移 这里样式的话就不写了，可以根据自己的需求来定义，主要的还是逻辑部分。 var moveUporDown= {
html做点击或自动滚动图片,JS实现的点击按钮图片上下滚动效果示例
weixin_30341445的博客
06-03 951
本文实例讲述了JS实现的点击按钮图片上下滚动效果。分享给大家供大家参考，具体如下：Title*{margin: 0;padding:0;list-style: none;}.big{width: 200px;height: 200px;margin:100px auto;}ul{width: 100px;height: 100px;border: 1px solid black;position:...
js 脚本实现 上移下移功能
xiechunmei13的专栏
06-08 3343
<br /><!--复制代码可直接运行--><br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Conten
JS实现LI行数据的上移和下移
weixin_30632899的博客
04-16 330
JavaScript实现的代码，JavaScript排序功能演示，点击按钮实现数据的上移和下称，一共有两组测试效果，上组采用箭头图标控制的方式，更美观，下组是直接使用文字，根据你的需要自行选择。myList为ul的id值，m为0显示文字，m为1显示图片，mO、mT为文字或图片内容。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran...
创建实用可编辑静态表格：增删改上移下移功能
实现上移和下移操作通常需要通过JavaScript来获取并更新元素在DOM中的位置。 6. HTML: 是网页制作的基础语言，用于构建网页结构和内容。在这个应用中，HTML负责创建静态的表格布局和基本的网页结构。 7. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值