欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

js怎么把按钮往下移_js 实现单行数据上下移动

发布时间:2025/3/21 编程问答 38 豆豆
生活随笔 收集整理的这篇文章主要介绍了 js怎么把按钮往下移_js 实现单行数据上下移动 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

部分代码是react.js的写法,但是js部分大部分都是通用的

HTML部分

上移

下移

js 部分

单行数据上移下移功能,多行的话这个方法也许不管用了。

moveData=(status)=>{

let { WaListData, detailsId } = this.state;   // WaListData是数组,detailsId是单行数据id(唯一的)

for(let i=0 , a = WaListData.length; i < a;i++){

let arr = WaListData[i];

let det = [];

det.push(detailsId);

if(det.some(v => v === arr.stkLocID)){    //stkLocID是数组里面的识别id

if(status === 'up'){

if(i === 0){

message.error('到顶了');

}else {

WaListData[i] = WaListData.splice(i-1, 1, WaListData[i])[0]      //这里做了三个事情下面①分析:

}

this.setState({WaListData})

}else if (status === 'down'){

if(i === WaListData.length - 1){

message.error('到底了');

}else {

WaListData[i] = WaListData.splice(i+1, 1, WaListData[i])[0]

}

this.setState({WaListData});

i += 1;

}

}

}

}

①对上面splice分析解释:

第一件:WaListData.splice(i-1, 1)删除下个索引的数据

第二件:WaListData.splice(i-1, 1, WaListData[i])用当前索引数据(WaListData[i])替换下个索引的数据

第三件:WaListData[i]= WaListData.splice(i-1, 1, WaListData[i])[0]当WaListData.splice()方法执行后会返回删除的数据,并将删除的数据赋值给当前索引

总结

以上是生活随笔为你收集整理的js怎么把按钮往下移_js 实现单行数据上下移动的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。