输入的数据怎么不排序呢？
<body>
<table border="1" bordercolor="#33CCCC" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<th> 姓名</th>
<th>
<a href="#" onclick="getTable()">年龄</a>
</th>
<th> 籍贯</th>
</tr>
<!--
<tr>
<td><input type="text" name="name" /></td>
<td><input type="text" name="age" /></td>
<td><input type="text" name="address" /></td>
</tr>
<tr>
<td><input type="text" name="name" /></td>
<td><input type="text" name="age" /></td>
<td><input type="text" name="address" /></td>
</tr>
<tr>
<td><input type="text" name="name" /></td>
<td><input type="text" name="age" /></td>
<td><input type="text" name="address" /></td>
</tr>
<tr>
<td><input type="text" name="name" /></td>
<td><input type="text" name="age" /></td>
<td><input type="text" name="address" /></td>
</tr>
<tr>
<td><input type="text" name="name" /></td>
<td><input type="text" name="age" /></td>
<td><input type="text" name="address" /></td>
</tr>
--->
<tr>
<td>张三</td>
<td>25</td>
<td>上海</td>
</tr>
<tr>
<td>张5</td>
<td>55</td>
<td>上7海</td>
</tr>
<tr>
<td>张三</td>
<td>15</td>
<td>上海</td>
</tr>
<tr>
<td>张8三</td>
<td>26</td>
<td>上海</td>
</tr>
</tbody>
</table>
</body>
上面是html代码，
function getTable()
{
var tabNode=document.getElementsByTagName("table")[0];
var trows=tabNode.rows;
var arr=new Array();
var length=trows.length;
for(var x=1;x!=length;x++)
{
arr[x-1]=trows[x];
}
sortArr(arr);
var tbdNode=tabNode.childNodes[0];
for(var x=0;x<arr.length;x++)
{
tbdNode.appendChild(arr[x]);
}
}
function sortArr(arr)
{
var length=arr.length;
for(var x=0;x<length;x++)
{
for(var y=x+1;y<length;y++)
{
if(arr[x].cells[1].innerText>arr[y].cells[1].innerText)
{
var temp=arr[x];
arr[x]=arr[y];
arr[y]=temp;
}
}
}
}
[解决办法]
另外，排序的函数写得不对。是按文本排序的。111会比2排得还靠前。应该转换成数字进行比较。
function sortArr(arr)
{
var length=arr.length;
for(var x=0;x<length;x++)
{
for(var y=x+1;y<length;y++)
{
if(Number(arr[x].cells[1].innerText)>Number(arr[y].cells[1].innerText)) {
var temp=arr[x];
arr[x]=arr[y];
arr[y]=temp;
}
}
}
}
[解决办法]
Lz试试这样，直接使用Array.sort()去排序
table布局操作起来还是觉得很别扭。。。。
- HTML code
<script type="text/javascript">var tableArry=new Array(),isSort=false;function tableInit(){ var o=document.getElementById('me').getElementsByTagName('tr'); if(o.length<3){return;} for(var i=2;i<o.length;i++){ var td=o[i].getElementsByTagName('td'); var name=td[0].innerHTML, age=td[1].innerHTML, addr=td[2].innerHTML; tableArry.push({name:name,age:age,addr:addr}) }}function clearTable(){ var o=document.getElementById('me').getElementsByTagName('tbody')[0]; var tr=o.getElementsByTagName('tr'); if(tr.length<3){return;} var clearArry=new Array(); for(var i=2;i<tr.length;i++){ clearArry.push(tr[i]); }; for(var j=0;j<clearArry.length;j++){ o.removeChild(clearArry[j]); }}function sort1(){ tableArry.sort(function(a,b){return parseInt(a.age)-parseInt(b.age)});}function sort2(){ tableArry.sort(function(a,b){return parseInt(b.age)-parseInt(a.age)});}function sortTable(toggle){ clearTable(); if(toggle){ if(!isSort){sort1();isSort=true}else{sort2();isSort=false} }else{ isSort?sort1():sort2(); }; var o=document.getElementById('me').getElementsByTagName('tbody')[0]; for(i=0;i<tableArry.length;i++){ var tr=document.createElement("tr"); var td=document.createElement('td'); td.innerHTML=tableArry[i].name; tr.appendChild(td); td=document.createElement('td'); td.innerHTML=tableArry[i].age; tr.appendChild(td); td=document.createElement('td'); td.innerHTML=tableArry[i].addr; tr.appendChild(td); o.appendChild(tr); }}function addItem(){ var name=document.getElementById("name[]").value, age=document.getElementById("age[]").value, addr=document.getElementById("address[]").value; if(name.length>0 && age.length>0 && addr.length>0){ tableArry.push({name:name,age:age,addr:addr}); } sortTable(false);}window.onload=function(){ tableInit();}</script><table border="1" bordercolor="#33CCCC" cellspacing="0" cellpadding="5" id="me"> <tbody> <tr> <th>姓名</th> <th><a href="javascript:void();" onclick="javascript:sortTable(true)">年龄</a> </th> <th>籍贯</th> </tr> <tr> <td><input type="text" id="name[]" /></td> <td><input type="text" id="age[]" /></td> <td><input type="text" id="address[]" /><input type="button" onclick="addItem();" value="添加" /></td> </tr> <tr> <td>姓名一</td> <td>25</td> <td>上海</td> </tr> <tr> <td>姓名二</td> <td>55</td> <td>上7海</td> </tr> <tr> <td>姓名三</td> <td>15</td> <td>上海</td> </tr> <tr> <td>姓名四</td> <td>26</td> <td>上海</td> </tr> </tbody></table>