come_on_air 2016-09-11 11:22 采纳率: 0%
浏览 3802
已采纳

jquery实现点击按钮某一列按照数字大小进行排序

如图 这是最初的排序
图片说明

操作后显示成这样
步骤1
图片说明
结果
图片说明
附上代码图,希望大神可以写一个操作程序

 <?php

header("Content-type:text/html;charset=utf-8");
?>

<div class="import-index" xmlns="http://www.w3.org/1999/html">
    <h1>测试排序</h1>
    <div style="margin-left: 100px; width: 900px;">
        <div style=" margin-top: 80px;">
            <h2>
                <span style="margin-left: 650px;"><input class="btn btn-success" type="button" style="height:30px; line-height:10px;width:150px;font-size:14px;padding-left:5px;" onclick="SortTb()" value="排序刷新"/></span>
            </h2>
        </div>
        <table border="2" style=" width: 900px" id="matter">
            <tr align="center">
                <td style="padding: 5px;">序号</td>
                <td style="padding: 5px;">标题</td>
                <td style="padding: 5px;">备注</td>
                <td style="padding: 5px;">排序</td>
                <td style="padding: 5px;"><input type="checkbox"/>&nbsp剔除</td>
            </tr>
                <tr align="center">
                        <td style="padding: 5px;" id="test">125</td>
                        <td style="padding: 5px;">在浪荡不羁的日子里,勇闯天涯.....</td>
                        <td style="padding: 5px;">打滚分组</td>
                        <td style="padding: 3px;"><input size="3" type="text" name="num" value="1"/></td>
                        <td><input type="checkbox"  data-title="快乐" data-index="2"
                                   data-mark="打滚分组" data-num="1"name="remove[]"/></td>
                    </tr>
            <tr align="center">
                <td style="padding: 5px;" id="test">126</td>
                <td style="padding: 5px;">人生何处不相逢.......</td>
                <td style="padding: 5px;">打滚分组</td>
                <td style="padding: 3px;"><input size="3" type="text" name="num" value="2"/></td>
                <td><input type="checkbox"  data-title="快乐" data-index="2"
                           data-mark="打滚分组" data-num="1"name="remove[]"/></td>
            </tr>
            <tr align="center">
                <td style="padding: 5px;" id="test">123</td>
                <td style="padding: 5px;">你快乐吗,我很快乐....</td>
                <td style="padding: 5px;">打滚分组</td>
                <td style="padding: 3px;"><input size="3" type="text" name="num" value="3"/></td>
                <td><input type="checkbox"  data-title="快乐" data-index="2"
                           data-mark="打滚分组" data-num="1"name="remove[]"/></td>
            </tr>
            <tr align="center">
                <td style="padding: 5px;" id="test">124</td>
                <td style="padding: 5px;">昨天很美好,将来会怎样?.....</td>
                <td style="padding: 5px;">打滚分组</td>
                <td style="padding: 3px;"><input size="3" type="text" name="num" value="4"/></td>
                <td><input type="checkbox"  data-title="快乐" data-index="2"
                           data-mark="打滚分组" data-num="1"name="remove[]"/></td>
            </tr>
        </table>

    </div>
</div>
<script language="JavaScript" src="jquery-1.7.2.min.js"></script><!--注意引进JQ-->
<script>
    function SortTb(){
//    alert('hello');
    }
</script>
  • 写回答

2条回答

  • Go 旅城通票 2016-09-11 12:10
    关注
    
        function SortTb() {
            var trs = [], matter = document.getElementById('matter'), allRows = matter.rows;
            for (var i = 1; i < allRows.length; i++) trs.push(allRows[i]);
            trs.sort(function (tr1, tr2) { return parseInt(tr1.getElementsByTagName('input')[0].value) - parseInt(tr2.getElementsByTagName('input')[0].value) });
            for (var i = 0; i < trs.length; i++) matter.tBodies[0].appendChild(trs[i]);
        }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥20 Python安装cvxpy库出问题
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题