Question

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

工作代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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>

NodeList从.innerHTML到Array或String

1 个答案: