js表格根据某一列排序
生活随笔
收集整理的這篇文章主要介紹了
js表格根据某一列排序
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
嗯哼，直接上代碼~
<!DOCTYPE HTML> <html><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <title>升序降序練習</title><!-- Bootstrap --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--><style type="text/css"> table{ width:500px; height:500px; border:#400040 solid 2px; border-collapse:collapse; } table td,th{ border:solid 2px; } table th{ background-color:#c0c0c0; } </style></head><body><button class="descendingOrder">降序</button><button class="ascendingOrder">升序</button><table id="tableId"> <thead><tr><th>姓名</th> <th>年齡</th> <th>出生地</th> </tr></thead><tbody><tr class='c1'> <td>張三</td> <td><input type="text" name=""></td> <td>湖南長沙</td> </tr> <tr class='c2'> <td>李四</td> <td><input type="text" name=""></td> <td>湖南常德</td> </tr> <tr class='c3'> <td>王五</td> <td><input type="text" name=""></td> <td>湖南臨澧</td> </tr> <tr class='c4'> <td>趙六</td> <td><input type="text" name=""></td> <td>浙江杭州</td> </tr> </tbody></table> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script type="text/javascript">// 將字符串轉化為數字var numFormat = function(val){return $.trim(val) === '' ? 0 : parseFloat(val);};/*** table根據某一列進行排序（js），table格式（<table><thead><tr><td></td></tr></thead><tbody><tr><td></td></tr></tbody></table>）* $table: table元素* columnNum: 按第幾列進行排序* isAscending: 是否正序排列（默認為false降序排列，否則為true升序排列）*/ var sortByColumn = function($table, columnNum, isAscending){var tableRows = $table.find('tbody tr'); var returnArr = tableRows;var length = returnArr.length;columnNum = columnNum - 1; if (isAscending) {// 升序排列for (var x = 0; x < length; x++) {for (var y = x + 1; y < length; y++) {var current = tableRows.eq(x).find('td').eq(columnNum).children().val();var latter = tableRows.eq(y).find('td').eq(columnNum).children().val();if (numFormat(current) > numFormat(latter)) { var temp = returnArr[x]; returnArr[x] = returnArr[y]; returnArr[y] = temp;}} }} else {// 降序排列for (var x = length-1; x >= 0; x--) {for (var y = x - 1; y >= 0; y--) {var current = tableRows.eq(x).find('td').eq(columnNum).children().val();var latter = tableRows.eq(y).find('td').eq(columnNum).children().val();if (numFormat(current) > numFormat(latter)) { var temp = returnArr[x]; returnArr[x] = returnArr[y]; returnArr[y] = temp;}} }} // 最后正常輸出for (var x = 0; x < length; x++) {returnArr[x].parentNode.appendChild(returnArr[x]); } };// 降序$('.descendingOrder').on('click', function(){var table = $('#tableId');sortByColumn($('#tableId'), 2);});// 升序$('.ascendingOrder').on('click', function(){var table = $('#tableId');sortByColumn($('#tableId'), 2, true);});</script></body> </html>總結
以上是生活随笔為你收集整理的js表格根据某一列排序的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 回顾经典电影星舰战队I have not
- 下一篇： 夺命追击(Murderous Pursu