如何在 JavaScript 中的现有表行之间进行替换

How to replace between existing table rows in JavaScript

本文关键字:之间 替换 JavaScript      更新时间:2023-09-26

我正在尝试用新顺序重新生成一个表,我遇到的问题是性能,我有这样的东西:

<table>
<tr id="row1"></tr>
<tr id="row2"></tr>
<tr id="row3"></tr>
<tr id="row4"></tr>
</table>

显然我的表要复杂得多,但我想要的是一个具有良好替换命令性能的解决方案我的目标表应该是这样的:

   <table id="mainTable">
    <tr id="row3"></tr>
    <tr id="row4"></tr>
    <tr id="row1"></tr>
    <tr id="row2"></tr>
    </table>

当我重绘它时,性能很差(超过 100 行)有没有办法在不重新绘制的情况下替换它们之间的行?谢谢

为了重新排列它们,请使用append()next()附加它们

$table = $('#mainTable');
$table.append($('#row1,#row2', $table));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mainTable">
  <tr id="row1">
    <td>1</td>
  </tr>
  <tr id="row2">
    <td>2</td>
  </tr>
  <tr id="row3">
    <td>3</td>
  </tr>
  <tr id="row4">
    <td>4</td>
  </tr>
</table>

基本的说法是使用 jquery "after" 函数,它将目标元素移动到想要的元素之后。

$("#row1").after("#row4");

或者如果你想根据表的值对表进行排序,你可以使用这样的插件: