javaScript小案例------js实现动态排序表格效果篇

前端志茗

已于 2022-04-05 21:47:13 修改

阅读量2.6k

点赞数 10

文章标签： javascript

于 2022-04-02 21:27:14 首次发布

本文链接：https://blog.csdn.net/qq_56745273/article/details/123928088

版权

原生js书写动态排序表格

js动态排序表格

js动态排序表格

这一次写一写js动态排序表格，动态排序表格在前端书写后端页面时常见。我觉得平时应该不会常见的，当然这是我个人的理解，勿怪。话不多说，开干！

动态排序表格效果

页面准备

页面浏览：

在这里插入图片描述

动态排序表格需求：

动态排序表格顾名思义就是可以排序，
首先可以看上图，前面都是复选框，第一行表示的是全选框，这些按钮的需求是我点击全选框时，下面的五个复选框同时全部是选中状态；或者是点击下面的复选框时，一个一个点击，五个全部点击显示选中状态，那么全选框就变成选中状态，如果没有全部选中，那么全选框就不显示选中状态。
然后可以看见第一行的各种标题，编号、姓名、年龄、职位。我要做的是当我点击这四个标题中的一个是，它会自动把它所在那一列的内容排序。
最后------让思路变成代码，跑起来吧！！！

HTML：

html，css就不多解释了，直接把代码放上来了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态排序表格</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <table class="table-container">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" name="" id="" class="checkbox">
                </th>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>职位</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="" id="">