javascript中的排序功能答案

【问题标题】：Sorting function in javascriptjavascript中的排序功能
【发布时间】：2012-09-15 16:17:57
【问题描述】：

您好，我有带有表格的 html 结构。我想根据它们的值对 td 进行排序。我尝试了它，但找不到实现它的逻辑。我的功能是

<head>
<script type="text/javascript">
function sorting(){
    var sortvalue= document.getElementsByTagName('td');
    for(i=0; i<sortvalue.length;i++){
        var val= sortvalue[i].value
        }
    }


</script>

</head>

<body>

<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>5</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
    <tr>
    <td>1</td>
  </tr>


</table>

<a href="#" onclick="sorting()">click to sort</a>
</body>

【问题讨论】：

如果你使用的是 js 库，肯定有插件可以为你排序。
我不久前写了一个reply，其中可能包含用于此类“动态”表格的有用链接，其中包含排序和内容。

标签： javascript html

【解决方案1】：

如果您打算做的不仅仅是整理这些数字：那些说您应该使用插件的人是正确的。尝试制作自己的表格分类器需要付出更多的努力。

如果您只想对这些数字进行排序（从小到大）：

function sorting() {
    td = document.getElementsByTagName("td");
    sorted = [];
    for (x = 0; x < td.length; x++)
        sorted[x] = Number(td[x].innerHTML);
    sorted.sort();
    for (x = 0; x < sorted.length; x++) 
        td[x].innerHTML = sorted[x];
}

从大到小：

function sorting() {
    td = document.getElementsByTagName("td");
    sorted = [];
    for (x = 0; x < td.length; x++)
        sorted[x] = Number(td[x].innerHTML);
    sorted.sort().reverse();
    for (x = 0; x < sorted.length; x++) 
        td[x].innerHTML = sorted[x];
}

【讨论】：

【解决方案2】：

假设您将脚本放在链接下，或者将其添加到 domready：

function sorting(){

    var tbl = document.getElementsByTagName('table')[0];
    var store = [];
    for(var i=0, len=tbl.rows.length;i<len; i++){
        var row = tbl.rows[i];
        var sortnr = parseFloat(row.cells[0].textContent || row.cells[0].innerText);
        if(!isNaN(sortnr)) store.push([sortnr, row]);
    }
    store.sort(function(x,y){
        return x[0] - y[0];
    });
    for(var i=0, len=store.length; i<len; i++){
        tbl.appendChild(store[i][1]);
    }
    store = null;
}

链接：http://jsfiddle.net/UMjDb/

【讨论】：

【解决方案3】：

对于您的示例，您可以从节点列表中创建一个单元格数据数组并对该数组进行排序，然后用排序后的数据替换单元格数据。比移动元素更简单。

<head>
<script type= "text/javascript">
function sorting(){
    var T= [], tds= document.getElementsByTagName('td');
    for(var i= 0;i<tds.length;i++){
        T.push(tds[i].firstChild.data);
    }
    T.sort(function(a, b){
        return a-b
    });
    for(var i= 0;i<tds.length;i++){
        tds[i].replaceChild(document.createTextNode(T[i]), tds[i].firstChild);
    }
}
</script>
</head>
<body>
<table width= "500" border= "0" cellspacing= "0" cellpadding= "0">
<tr>
<td>5</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
<a href= "#" onclick= "sorting()">click to sort</a>
</body>

【讨论】：

【解决方案4】：

我给出了一个jquery解决方案，希望这篇文章对你有所帮助。

var tdData = Array();
$(document).ready(function(){
    $('td').each(function(i){
   tdData [i] = $(this).text();
   });  
});

function sorting(){
   var sortedData = tdData.sort();
    $('td').each(function(i){
  $(this).text(sortedData[i]);
  } ); 
}

complete solution: link

【讨论】：

【解决方案5】：

第 1 步：查找所有 td
第 2 步：获取它们的值
第 3 步：按值对它们进行排序
第 4 步：以正确的顺序将它们放回父级。这可以简单地通过 $(parent).html("").append(sortedNodes) 来完成（如果你使用的是 jQuery）。

正如@FelixKling 在下面指出的那样，.html("") 除了为了代码清晰之外并不是绝对必要的，因为“如果树中已经存在节点，那么.append 将首先从当前位置删除它们并添加他们给新的父母”

【讨论】：

(a) $(parent).html("").append(sortedNodes) 是 jQuery（这里没有提到） (b) $(parent).append(sortedNodes) 就够了 ;)
(a) 是的，将其包含在答案中。 (b) 不正确，因为我们想设置 sortedNodes 而不是 当前节点，而不是除了当前节点 :)
如果树中已经存在节点，.append 将首先将它们从当前位置移除并添加到新的父节点。

【解决方案6】：

您需要重新整理表格。最简单的方法是使用this one 之类的插件jQuery

您需要修改 DOM，它们将采用不同的方式来执行此操作，例如获取所有数据、删除所有行并以正确的顺序重新添加它们。
使用detach 并重新附加可以更好地改进它。

【讨论】：