使用js使table按照表头排序

最新推荐文章于 2024-05-30 14:37:27 发布

步步静心

最新推荐文章于 2024-05-30 14:37:27 发布

阅读量309

点赞数

分类专栏：前端

原文链接：https://blog.csdn.net/weixin_30548917/article/details/97356700

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用js使table按照表头排序</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div style="text-align: center;margin: 10px">
  <button type="button" style="width: 200px;" class="btn btn-outline-danger">按照表头排序</button>
</div>
<table class="table table-hover" style="width: 80%;text-align:center;margin: 0 auto;border: 0;" id="sorttable">
  <thead class="thead-dark">
    <tr>
      <th>Fri</th>
      <th>Thu</th>
      <th>Wed</th>
      <th>Tue</th>
      <th>Mon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5</td>
      <td>4</td>
      <td>3</td>
      <td>2</td>
      <td>1</td>
    </tr>
    <tr>
      <td>5</td>
      <td>4</td>
      <td>3</td>
      <td>2</td>
      <td>1</td>
    </tr>
    <tr>
      <td>5</td>
      <td>4</td>
      <td>3</td>
      <td>2</td>
      <td>1</td>
    </tr>
    <tr>
      <td>5</td>
      <td>4</td>
      <td>3</td>
      <td>2</td>
      <td>1</td>
    </tr>
    <tr>
      <td>5</td>
      <td>4</td>
      <td>3</td>
      <td>2</td>
      <td>1</td>
    </tr>
  </tbody>

</table>

</body>
<script type="text/javascript">
  jQuery.fn.swapWith = function (to){
    return this.each(function () {
      var copy_to = $(to).clone(true);
      var copy_from = $(this).clone(true);
      $(to).replaceWith(copy_from);
      $(this).replaceWith(copy_to);
    })
  }

  jQuery.moveColumn = function(table, from, to){
    var rows = jQuery('tr', table);
    var cols;
    rows.each(function() {
      cols = jQuery(this).children('th, td');
      cols.eq(from).swapWith(cols.eq(to));
    })
  }

  $(function() {
    $("button").click(function () {
      var tbl = $("#sorttable");
      $('#sorttable tr').eq(0).each(function (i) { // 遍历 tr
        var length = $(this).find('th').length;
        for (var i = 0; i < length / 2; i++) {
          jQuery.moveColumn(tbl, i, length - i - 1);
        }
      });
    });
  })


</script>
</html>

转载于:https://blog.csdn.net/weixin_30548917/article/details/97356700

步步静心

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用js使table按照表头排序

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>使用js使table按照表头排序</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <scr
复制链接

扫一扫

专栏目录