Question

我有以下问题：

我必须对XHTML表进行排序，因此我需要访问第一个col。然后对行进行排序。我的表看起来如此：

<table id="output">
<tr> 
   <td>Something</td> 
   <td>Element</td>
   <td>No idea what else</td> 
</tr>

<tr> 
   <td>A Something</td> 
   <td>Second element </td> 
   <td>No idea what else</td>
</tr>
 ... 
</table>

这应该是结果：

A Something        Element            No idea what
Something          Second element     No idea what

所以...我用DOM树做这个，这是函数，我遇到问题：

 var compare=function(a, b) {
        var x=a.firstChild.data;
        var y=b.firstChild.data;
        if(x>y) return -1;
        else if(y<x) return 1;
        else return 0;  
    }

    var sort=function() {
        var table=document.getElementById("output");
        var elementList=document.getElementsByTagName("tr"); //The node list
        var array_table=new Array();

            for(var i=0; i<elementList.length; i++) {
                array_table.push(elementList[i]); 
            }

           Here I need access to the td[0] in every tr-Element in the array.
           But with array_table.getElementsByTagName and the ready 
sort()-Function in JavaScript there is an error,that 
getElementsByTagname is not a function.

    //Evtl. appending at the end
         for(var j=0; j<array_table.length;j++){
            table.appendChild(array_table[j]); 
         }}

我的问题：如何访问每一行中的第一个<td>元素并比较文本？（我不允许使用jQuery或任何库）

Answer 1

你可以获得所有td的所有tr，你可以通过以下方式完成：

// Get all TRs
var trs = document.querySelectorAll('#output tr');

// get first TD in each TR
for (var index=0; index<trs.length; ++index) {
  var firstTD = trs[index][0];
  // your code ...
}

Answer 2

一个简单的解决方案是将要排序的行放入数组中，然后根据第一个单元格中的值进行排序，然后按顺序将行返回到表中。以下只是一个概念证明，您可以在自己的代码中进一步使用它，但要保持简单。

＆＃13;

function toArray(a) {
  var arr = [];
  for (var i=0, iLen=a.length; i<iLen; i++) arr[i] = a[i];
  return arr;
}

function sortTable(){
  // Get first tbody in document
  var tbody = document.querySelector('tbody');
  // Get rows of tbody
  var rows = tbody.querySelectorAll('tr');
  // Convert to Array
  rows = toArray(rows);
  // Sort rows in array
  rows.sort(function(a, b){return a.cells[0].textContent - b.cells[0].textContent});
  // Put back in table in order
  rows.forEach(function(row) {tbody.appendChild(row)});
}

＆＃13;

<table>
  <thead>
    <tr><td>A<td>B
  <tbody>
    <tr><td>0<td>foo
    <tr><td>5<td>foo
    <tr><td>3<td>foo
    <tr><td>1<td>foo
    <tr><td>2<td>foo
    <tr><td>4<td>foo
</table>
      
<button onclick="sortTable()">Sort on first column</button>

＆＃13;

请注意，您可以使用 tbody.rows 或 tbody.getElementsByTagName（＆＃39）替换 tbody.querySelectorAll（＆＃39; tr＆＃39;） ; TR＆＃39;。）

toArray 函数是故意简单的，它不会很好地处理稀疏数组（它将添加缺少的成员，其值为undefined）。这是必要的，因为Chrome不会出于某种原因对集合进行排序。对于IE 8，您可能还需要 forEach 的填充程序。

PS。

如果你想要一个＆＃34;一个班轮＆＃34;并且有一个非常新的javascript实现，上面可以压缩成以下使用没有库或单独的函数（我不是这种东西的忠实粉丝，这只是为了表明它可以完成，而不是建议它应该完成）：

Array.from(document.querySelectorAll('#output tbody tr td:first-child'))
    .sort(function(a,b){return a.innerText - b.innerText})
    .forEach(function(cell){cell.parentNode.parentNode.appendChild(cell.parentNode)});

访问数组中所有元素的第一个元素，由节点列表，JavaScript，DOM构成

2 个答案: