NodeList from .innerHTML to Array or String

我正在尝试将随机排序的HTML表的单元格条目保存到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>

orderlist实际上是一个HTMLCollection。您可以使用展开元素将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>

相关内容

最新更新

热门标签：