使用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>
0

2个回答

给你优化了下,不用写死代码,动态排序,直接贴到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>
1

用js创建表格数据会更好控制;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></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"></tbody>
            </table>
        </div>
    </body>
    <script type="text/javascript">
        var num = [1, 2, 3, 4, 5, 6, 7, 8];

        function setHtml() {
            var html = ""
            for (var i = 0; i < num.length; i++) {
                html += '<tr><td class="list_sort">' + (i + 1) + '</td><td>' + num[i] + '</td></tr>';
            }
            $("#pageContent").html(html);
        }
        setHtml();
        $('#sortID').click(function() {
            num.reverse();
            console.log(num);
            setHtml();
        })
    </script>
</html>

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!

相似问题

1
求助,使用 Javascript 实现 'min-width' 特性功能。
9
js怎么实现初始化点击事件
5
js实现单选按钮单击选中,再单击取消选中
4
JS实现整个页面的文本搜索定位
7
js实现自动复制(不是点击),能够兼容所有浏览器
5
使用JS如何获取剪贴板内容
7
怎样用JavaScript实现音频播放的控制
8
js怎么实现一个倒计时,这个方法没有实现,该怎么在这个代码上修改
15
javascript中递归实现1+2+3+4+...+100怎么实现,js递归输出结果可以用log
2
用原生js是如何实现使用 {{data}}方式 输出
99
只要回答,都给C币,请问怎么实现javascript对字符串和数字相互转换?
10
需要c币的看这里,简单问题请教:html5种如何使用javascript实现省、市、县的下拉同步?
2
请问如何使用javascript的map语句实现不定多个数组的相加?相加怎么用map实现?
2
javascript怎么实现判断页面上的链接的功能,判断链接怎么用js语言实现呢?
9
javascript都来回答,怎么实现下拉选择日期的功能,JQ或者JS怎么实现?
1
如何使用javascript实现一件电脑优化、清理和设置主页的功能,可以远程控制设置主页的内容
2
javascript怎么实现箭头的界面,不是实现箭头函数,而是桃宝那种状态箭头?
3
Web项目使用 Pdf.js类库实现在线预览PDF,点击 在线预览,出现“意外的服务器响应”,急
1
javascript怎么实现蒙特卡洛法计算圆周率的值?
0
javascript+unifia.js+ome怎么实现国标3码的过滤?