原生js写table点击表头按钮进行排序

最新推荐文章于 2024-03-29 09:41:19 发布

small面包

最新推荐文章于 2024-03-29 09:41:19 发布

阅读量2.3k

点赞数 2

分类专栏： table 排序表头文章标签： js html javascript

本文链接：https://blog.csdn.net/weixin_44986077/article/details/106688704

版权

最近在对之前的项目进行功能增加又因为是老项目所以用的是js和jquery
在这里插入图片描述
项目的需要是点击表头的按钮进行排序
按钮是在阿里矢量图中找的点击上箭头升序排列点击下箭头降序

下面是整理的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>1</title>
    <link rel="stylesheet" href="./font_qoy0poj5ux/iconfont.css" />
    <script src="./jquery-1.12.4.min.js"></script>
    <script src="./font_qoy0poj5ux/iconfont.js"></script>
    <style type="text/css">
      body {
   
        font-size: 12px;
        line-height: 25px;
      }
      tr {
   
        height: 25px;
      }
      th {
   
        font-size: 14px;
        border-bottom: solid 1px #dddddd;
        background-color: #eeeeee;
        border: solid 1px;
      }
      td {
   
        font-size: 12px;
        text-align: center;
        border: solid 1px;
      }
      .name {
   
        position: relative;
      }
      .icon-shang1 {
   
        position: absolute;
        font-size: 12%;
        top: 12%;
        height: 12px;
        line-height: 12px;
      }
      .icon-xia1 {
   
        line-height: 12px;
        height: 12px;
        bottom: 4%;
        position: absolute;
        font-size: 12%;
      }
    </style>
  </head>
  <body>
    <table
      border="0"
      id="tbl"
      style="border:solid 1px #DDDDDD;width:360px;"
      cellpadding="0"
      cellspacing="0"
    >
      <thead>
        <tr>
          <th id="th0" class="name">
            name
            <span class="iconfont icon-shang1" onclick="a(this)"></span>
            <span class="iconfont icon-xia1" onclick="bottom()"></span>
          </th>
          <th id="th1">muscle</th>
          <th id="th2">smart</th>
          <th id="th3">city</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class

最低0.47元/天解锁文章

small面包

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
原生js写table点击表头按钮进行排序

最近在对之前的项目进行功能增加又因为是老项目所以用的是js和jquery项目的需要是点击表头的按钮进行排序按钮是在阿里矢量图中找的点击上箭头升序排列点击下箭头降序下面是整理的代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-
复制链接

扫一扫