table中以input内的值重新作排序
时间:2014-07-08 15:23 来源: 我爱IT技术网 作者:山风
需求是这样 , HTML 要以 input 栏位内的值重新排序为一个新的 table
这个问题从今早搞到晚上 , 看过了很多 jquery 範例 , 还有朋友建议用甚么 jquery 的一个 plugin tablesorter …, 甚至自己想写个泡沫排序法 >< … 搞老半天都不得我意
后来才发现 , 塬来 javascript 本身就有个很好的 sort 可以用 , sort 可以用自定 function 的方式来写 , 搭配简单 jquery 就可以重新排序了
范例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.1");
</script>
<script type="text/JavaScript">
$(function() {
var mylist = $("table tbody tr").clone(true).get();
mylist.sort(function(a,b){
var compA = parseInt($(a).find('input[type="text"]').val());
var compB = parseInt($(b).find('input[type="text"]').val());
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
});
$("table tbody tr").remove();
$("table tbody").append($(mylist));
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="200" border="1">
<tbody>
<tr>
<td><input type="text" id="textfield_99" value="99" /></td>
<td>99</td>
</tr>
<tr>
<td><input type="text" id="textfield_6" value="6" /></td>
<td>6</td>
</tr>
<tr>
<td><input type="text" id="textfield_9" value="9" /></td>
<td>9</td>
</tr>
<tr>
<td><input type="text" id="textfield_10" value="10" /></td>
<td>10</td>
</tr>
<tr>
<td><input type="text" id="textfield_1" value="1" /></td>
<td>1</td>
</tr>
<tr>
<td><input type="text" id="textfield_4" value="4" /></td>
<td>4</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
这原理也很简单 , 先用 jquery 去 clone 所有 tr 节点为 mylist , 然后 mylist. 为 DOM Elements , 并且可用 javascript 原生的排序含数 , 裡面的写法就是自定函数 , 用 jqeury 去抓出 input 的值为 compA/compB 并且比对 compA/compB 的大小返回给 sort 就好了 …. 超简单的
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-