0

嗨，我有带表格的 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>
4

6 回答 6

1

假设您将脚本放在链接下，或​​者将其添加到 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/

于 2012-09-13T06:27:21.177 回答
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];
}
于 2012-09-13T06:28:41.590 回答
1

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

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

于 2012-09-13T06:31:01.303 回答
1

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

<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>
于 2012-09-13T06:38:14.207 回答
1

我给出了一个 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]);
  } ); 
}

完整解决方案：链接

于 2012-09-13T07:07:42.733 回答
0

您需要重新组织表格。最简单的方法是为jQuery使用像这样的插件

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

于 2012-09-13T06:21:49.487 回答