从 .innerHTML 到 Array 或 String 的 NodeList

Question

我正在尝试将随机排序的 HTML table 的单元格条目保存到 JavaScript 中的变量。到目前为止，我只需单击一个按钮即可获得第一列的节点列表。我的问题是，如何将此 NodeListe 转换为数组？我在 findOrder 函数内（在 for 声明内）尝试了不同的东西，比如 Array.prototype.slice.call (nl); 但它似乎不是很成功，因为各个条目显示为数组而不是所有一个数组中的条目。

工作代码：

function randomSort()
{
  var row = document.getElementById("sort").rows;
  var rC = row.length;
  var tableBody = document.getElementById("idforparentnode").parentNode;
  for(i=0;i<rC;i++){
    tableBody.insertBefore(row[Math.ceil(Math.random()*(rC-1))],row[i]);
  }
}

function findOrder()
{
  var orderlist = document.getElementsByClassName("order");
  for (var i=0; i<orderlist.length; i++)
  {
    var nl = orderlist[i].innerHTML;
    console.log(nl);
  }
}

<!DOCTYPE html>
<html>
<title>Sort a HTML Table Randomly</title>
<body>

<p>Click the button to sort the table randomly:</p>

<p><button onclick="randomSort()">Shuffle Line 3-6</button></p>

<table border="1" id="myTable">
  <thead>
   <th style="display:none;"></th>
    <th>Name</th>
    <th>Current Exchange Rate</th>
  </thead>

  <tbody class="avoid-sort">
    <tr>
      <td class="order" style="display:none;">1</td>
      <td>General Electric</td>
      <td>19,57</td>
    </tr>
    <tr>
      <td class="order" style="display:none;">2</td>
      <td>Johnson & Johnson</td>
      <td>119,14</td>
    </tr>
  </tbody>

  <tbody id="sort">
    <tr id="idforparentnode">
      <td class="order" style="display:none;">3</td>
      <td>Microsoft</td>
      <td>65,92</td>
    </tr>
    <tr>
      <td class="order" style="display:none;">4</td>
      <td>Verizon</td>
      <td>40,82</td>
    </tr>
    <tr>
      <td class="order" style="display:none;">5</td>
      <td>American Express</td>
      <td>77,21</td>
    </tr>
    <tr>
      <td class="order" style="display:none;">6</td>
      <td>WhatSoEver</td>
      <td>12,34</td>
    </tr>
  </tbody>
  
  <tbody class="avoid-sort">
    <tr>
      <td class="order" style="display:none;">7</td>
      <td>Apple</td>
      <td>133,90</td>
    </tr>
    <tr>
      <td class="order" style="display:none;">8</td>
      <td>Nintendo</td>
      <td>43,53</td>
    </tr>
    <tr>
      <td class="order" style="display:none;">9</td>
      <td>WhatEver</td>
      <td>999,99</td>
    </tr>
  </tbody>
</table>
<br>
<input type="button" value="Display Order (based on standard order)" onclick="findOrder()">
<br>
<p>Display order of rows: </p> 
<p id="orderdisplay"></p>

</body>
</html>

Answer 1

orderlist实际上是一个HTMLCollection。您可以使用 spread element

将 NodeList 或 HTMLCollection 转换为 Array

function randomSort()
{
  var row = document.getElementById("sort").rows;
  var rC = row.length;
  var tableBody = document.getElementById("idforparentnode").parentNode;
  for(i=0;i<rC;i++){
    tableBody.insertBefore(row[Math.ceil(Math.random()*(rC-1))],row[i]);
  }
}

function findOrder()
{
  var orderlist = [...document.getElementsByClassName("order")];
  console.log(Array.isArray(orderlist));
  for (var i=0; i<orderlist.length; i++)
  {
    var nl = orderlist[i].innerHTML;
    console.log(nl);
  }
}

<!DOCTYPE html>
<html>
<title>Sort a HTML Table Randomly</title>
<body>

<p>Click the button to sort the table randomly:</p>

<p><button onclick="randomSort()">Shuffle Line 3-6</button></p>

<table border="1" id="myTable">
  <thead>
   <th style="display:none;"></th>
    <th>Name</th>
    <th>Current Exchange Rate</th>
  </thead>

  <tbody class="avoid-sort">
    <tr>
      <td class="order" style="display:none;">1</td>
      <td>General Electric</td>
      <td>19,57</td>
    </tr>
    <tr>
      <td class="order" style="display:none;">2</td>
      <td>Johnson & Johnson</td>
      <td>119,14</td>
    </tr>
  </tbody>

  <tbody id="sort">
    <tr id="idforparentnode">
      <td class="order" style="display:none;">3</td>
      <td>Microsoft</td>
      <td>65,92</td>
    </tr>
    <tr>
      <td class="order" style="display:none;">4</td>
      <td>Verizon</td>
      <td>40,82</td>
    </tr>
    <tr>
      <td class="order" style="display:none;">5</td>
      <td>American Express</td>
      <td>77,21</td>
    </tr>
    <tr>
      <td class="order" style="display:none;">6</td>
      <td>WhatSoEver</td>
      <td>12,34</td>
    </tr>
  </tbody>
  
  <tbody class="avoid-sort">
    <tr>
      <td class="order" style="display:none;">7</td>
      <td>Apple</td>
      <td>133,90</td>
    </tr>
    <tr>
      <td class="order" style="display:none;">8</td>
      <td>Nintendo</td>
      <td>43,53</td>
    </tr>
    <tr>
      <td class="order" style="display:none;">9</td>
      <td>WhatEver</td>
      <td>999,99</td>
    </tr>
  </tbody>
</table>
<br>
<input type="button" value="Display Order (based on standard order)" onclick="findOrder()">
<br>
<p>Display order of rows: </p> 
<p id="orderdisplay"></p>

</body>
</html>

从 .innerHTML 到 Array 或 String 的 NodeList

NodeList from .innerHTML to Array or String

javascript

arrays

html-table

innerhtml

nodelist