需求是這樣 , 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;
});
<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>
$("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>
<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 就好了 …. 超簡單的
沒有留言:
張貼留言