ASP.net Razor 应用程序：使用 Bootstrap、CSS 或 JS，是不是有一种简单的方法可以左右移动整个表格列？即时重新排序列

Posted 2023-05-08

【中文标题】ASP.net Razor 应用程序：使用 Bootstrap、CSS 或 JS，是不是有一种简单的方法可以左右移动整个表格列？即时重新排序列

【英文标题】：ASP.net Razor app: Using Bootstrap, CSS or JS, is there an easy way to move an entire table column left and right? Reorder the columns on the flyASP.net Razor 应用程序：使用 Bootstrap、CSS 或 JS，是否有一种简单的方法可以左右移动整个表格列？即时重新排序列

【发布时间】：2021-08-15 00:05:59

【问题描述】：

当用户单击列标题上的左/右插入符号时，我需要获取一个 html 表并动态移动列。 这是不可能的吗？感觉就像一个大电梯。 我将不胜感激任何实现此功能的指针。谢谢。

【参考方案1】：

这是循环遍历每个单元格并将其移动到前一个单元格前面的基本方法。

很可能有一种更好/更短的方法可以做到这一点，但了解基本方法总能帮助您理解/开发更好的方法。

细分：

$("table>thead>tr,table>tbody>tr").each

循环遍历thead 和tbody，也可以执行$("table tr")，但如果您有嵌套表，这可能不起作用

$(this).find("th,td").eq(2).each(

这里的this 是前一个each 中的tr，找到子th 和td 然后只有第三列（从0 开始）。

$(this).insertBefore($(this).prev());

现在 this 是前一个 each 的第 th/td，取这个单元格（第 3 列）并将其移动到前一个单元格的前面。

片段：

$("button").click(() =>
  $("table>thead>tr,table>tbody>tr").each(function() 
    $(this).find("th,td").eq(2).each(function() 
      $(this).insertBefore($(this).prev());
    );
  )
);

table, th, td 
  border: 1px solid #CCC;
  border-collapse: collapse;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell 1 1</td>
      <td>cell 1 2</td>
      <td>cell 1 3</td>
    </tr>
    <tr>
      <td>cell 2 1</td>
      <td>cell 2 2</td>
      <td>cell 2 3</td>
    </tr>
  </tbody>
</table>
<button type='button' id='clickme'>click me</button>