새로 고침 없이 테이블에 대한 열 정렬

2610 단어 functiontableborder
<html>
<head>
<script language="javascript">
var sorttype = 1; 
//desc 
function sortByCol(colNum)
{ //   
	var parNode = document.getElementById("listtable"); //   table ,listtable    ID
	for(var i=0; i<parNode.rows.length-1; i++)	//    
	{
		var flag=true;
		for(var n=i+1; n<parNode.rows.length; n++)
		{
			var ifrom = i;
			var ito = n;
			if(sorttype==1)
			{
				if(parNode.rows[ifrom].cells[colNum].childNodes[0].data > parNode.rows[ito].cells[colNum].childNodes[0].data)
     			{
     				parNode.moveRow(ifrom,ito); //from-to
	  				flag=false;
    			} 
    		}else{
     			if(parNode.rows[ifrom].cells[colNum].childNodes[0].data <parNode.rows[ito].cells[colNum].childNodes[0].data)
     			{
      				parNode.moveRow(ifrom,ito); //from-to
	  				flag=false;
     			}
    		}
			if(flag) break;
  	 }
}
sorttype = 0 - sorttype; //asc 
}
</script>
</head>
<body>
<table id="listtable" width="100%" border="1" cellpadding="0" cellspacing="1">
<tr>
    <th onClick="sortByCol(0);">  </th>
    <th onClick="sortByCol(1);">  </th>
    <th onClick="sortByCol(2);">  </th>
    <th onClick="sortByCol(3);">  </th>
    <th onClick="sortByCol(4);">  </th>
</tr>
<tr>
    <td>1</td>
    <td>ZXE</td>
    <td>56</td>
    <td>1</td>
    <td>13</td>
</tr>
<tr>
    <td>2</td>
    <td>SCHB</td>
    <td>asdf</td>
    <td>3</td>
    <td>23</td>
</tr>
<tr>
    <td>3</td>
    <td>WE</td>
    <td>23</td>
    <td>3</td>
    <td>34</td>
</tr>
<tr>
    <td>4</td>
    <td>SQD</td>
    <td>34</td>
    <td>2</td>
    <td>76</td>
</tr>
<tr>
    <td>5</td>
    <td>EDE</td>
    <td>67</td>
    <td>1</td>
    <td>34</td>
</tr>
<tr>
    <td>6</td>
    <td>BD</td>
    <td>sdf</td>
    <td>2</td>
    <td>78</td>
</tr>
<tr>
    <td>7</td>
    <td>AA</td>
    <td>23</td>
    <td>1</td>
    <td>34</td>
</tr>
</table>
</body>
</html>

좋은 웹페이지 즐겨찾기