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

Question

我有以下问题：

我必须对 XHTML 表进行排序，所以我需要访问第一个列。然后对行进行排序。我的桌子看起来是这样的：

<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

您可以获得所有tr 中的所有第一个td，您可以通过以下方式获得：

// 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

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

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)});
}

<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>      

请注意，您可以将 tbody.querySelectorAll('tr') 替换为 tbody.rows 或 tbody.getElementsByTagName('tr') .

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

PS。

如果你想要一个“单线”并且有一个最近的 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)});