需求是這樣 , 以下 HTML CODE 要以 input 欄位內的值重新排序為一個新的 table

<form id="form1" name="form1" method="post" action="">
  <table width="200" border="1">
  <tbody>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_99" value="99" /></td>
      <td>99</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_6" value="6" /></td>
      <td>6</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_9" value="9" /></td>
      <td>9</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_10" value="10" /></td>
      <td>10</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_4" value="4" /></td>
      <td>4</td>
    </tr>
    <tr>
      <td>
        <input name="textfield[]" type="text" id="textfield_1" value="1" /></td>
      <td>1</td>
    </tr>
    </tbody>
  </table>
</form>

這個問題從今早搞到晚上 , 看過了很多 jquery 範例 , 還有朋友建議用甚麼 jquery 的一個 plugin tablesorter ..., 甚至自己想寫個泡沫排序法 >< ... 搞老半天都不得我意

後來才發現 , 原來 javascript 本身就有個很好的 sort 可以用 , sort 可以用自定 function 的方式來寫 , 搭配簡單 jquery 就可以重新排序了

範例如下 :

<script>

$(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>

這原理也很簡單 , 先用 jquery 去 clone 所有 tr 節點為 mylist  , 然後 mylist. 為 DOM Elements , 並且可用 javascript 原生的排序含數 , 裡面的寫法就是自定函數 , 用 jqeury 去抓出 input 的值為 compA/compB 並且比對 compA/compB 的大小返回給 sort 就好了 .... 超簡單的。