永不放弃的咸蛋 2018-10-16 06:34 采纳率: 0%
浏览 2879

使用js点击实现正序倒序排列

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta keywords="JavaScript" />
<meta content="1" />
<title>1</title>
<script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
table, table td, table th {
  border: none;
  vertical-align: top;
  border-collapse: collapse;
  word-break: break-all;
}
.MainTable {
  width: 500px;
  line-height: 45px;
  margin: auto;
  text-align: left;
}
.MainTable tr {
  border-bottom:1px solid #E1E1E1;
}
.MainTable td {
  padding: 0 10px 0 0;
}
/*正序排列样式*/
.sort_asc {
  background:url(images/sorticon.png) 55px 18px no-repeat;
  cursor:pointer;
}
/*倒序排列样式*/
.sort_desc {
  background:url(images/sorticon.png) 55px -18px no-repeat;
  cursor:pointer;
}
.list_sort {
  width: 60px;
  text-align: center;
}
</style>

</head>
<body>
<div class="divframe">
  <table class="MainTable">
    <thead>
      <tr>
        <th class="sort_asc list_sort" id="sortID">序号</th>
        <th>内容</th>
      </tr>
    </thead>
    <tbody id="pageContent">
      <tr>
        <td class="list_sort">1</td>
        <td>1</td>
      </tr>
      <tr>
        <td class="list_sort">2</td>
        <td>2</td>
      </tr>
      <tr>
        <td class="list_sort">3</td>
        <td>3</td>
      </tr>
      <tr>
        <td class="list_sort">4</td>
        <td>4</td>
      </tr>
      <tr>
        <td class="list_sort">5</td>
        <td>5</td>
      </tr>
      <tr>
        <td class="list_sort">6</td>
        <td>6</td>
      </tr>
      <tr>
        <td class="list_sort">7</td>
        <td>7</td>
      </tr>

    </tbody>
  </table>
</div>
</body>
<script type="text/javascript">
    $('#sortID').click(function (){     


    })
</script>
</html>
  • 写回答

2条回答

  • 张大教主 2018-11-03 08:36
    关注

    给你优化了下，不用写死代码，动态排序，直接贴到html文件中，在浏览器中查看效果

     <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta keywords="JavaScript" />
<meta content="1" />
<title>1</title>
<script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.2.3/jquery.min.js"></script>
<style type="text/css">
table, table td, table th {
  border: none;
  vertical-align: top;
  border-collapse: collapse;
  word-break: break-all;
}
.MainTable {
  width: 500px;
  line-height: 45px;
  margin: auto;
  text-align: left;
}
.MainTable tr {
  border-bottom:1px solid #E1E1E1;
}
.MainTable td {
  padding: 0 10px 0 0;
}
/*正序排列样式*/
.sort_asc {
  background:url(images/sorticon.png) 55px 18px no-repeat;
  cursor:pointer;
}
/*倒序排列样式*/
.sort_desc {
   background:url(images/sorticon.png) 55px -18px no-repeat;
  cursor:pointer;
}
.list_sort {
  width: 60px;
  text-align: center;
}
</style>
<script type="text/javascript">
    var ord=0;
    $(function(){
        changeOrder();
        $('#sortID').click(function (){     
            ord++;
            changeOrder();
        })
    })

    function changeOrder(){
        var html='';
        //正序排列
        if(ord%2==0){
            //表头样式更新
            $("#sortID").removeClass("sort_desc");
            $("#sortID").addClass("sort_asc");
            for(var i=0;i<7;i++){
                var value=i+1;
                html+=('<tr><td class="list_sort">'+value+'</td><td>'+value+'</td)</tr>');
            }
        }
        else{
        //倒序排列
            $("#sortID").removeClass("sort_asc");
            $("#sortID").addClass("sort_desc");
            var num=0;
            for(var i=7;i>0;i--){
                num++;
                var value=i;
                html+=('<tr><td class="list_sort">'+num+'</td><td>'+value+'</td)</tr>');
            }
        }
        $("#pageContent").html(html);
    }
</script>
</head>
<body>
<div class="divframe">
  <table class="MainTable">
    <thead>
      <tr>
        <th class="list_sort" id="sortID">序号</th>
        <th class="list_sort">内容</th>
      </tr>
    </thead>
    <tbody id="pageContent">
    </tbody>
  </table>
</div>
</body>
</html>
    评论

报告相同问题？

悬赏问题

  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 LiBeAs的带隙等于0.997eV,计算阴离子的N和P
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 来真人，不要ai！matlab有关常微分方程的问题求解决，
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算