时间戳

首页 > 解决方案 > 移动列的逻辑

javascript - 移动列的逻辑

问题描述

我有一个如下表：

<table>
<tbody>
    <tr id="row0">0</tr>
    <tr id="row1">1</tr>
    <tr id="row2">2</tr>
    <tr id="row3">3</tr>
    <tr id="row4">4</tr>
    <tr id="row5">5</tr>
</tbody>

我想上下移动我的行，我创建了一个如下的函数

function moveColumn(i){

let next = parseInt(i) + 1;

$('#row' + parseInt(i)).insertAfter($('#row' + next));

}

但是逻辑不起作用，因为如果您使用 ids 并将列向下移动，则无法再次单击，因为现在 0 低于 1。（例如）

移动我的列有什么好的逻辑？有没有办法告诉一行使用 jquery 插入下一行？

更新

寻找类似的东西

    $('#row' + parseInt(i)).insertAfter($('tr:eq(next)'));

标签： javascriptjquery

解决方案

使用index和 jQuery.eq()来定位元素和.insertBefore()移动元素。

const moveChild = (from, to, $par) => {
  const $ch = $par.children();
  $ch.eq(from).insertBefore($ch.eq(to));
};

const $par = $("table tbody");
moveChild(4, 0, $par); // move index 4 to index 0
moveChild(3, 1, $par); // and then move index 3 to index 1
<table>
  <tbody>
    <tr><td>0</td></tr>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

推荐阅读