从 .innerHTML 到 Array 或 String 的 NodeList

Posted 2023-05-07

技术标签:

【中文标题】从 .innerHTML 到 Array 或 String 的 NodeList【英文标题】：NodeList from .innerHTML to Array or String 【发布时间】：2018-03-31 14:09:44 【问题描述】：

我正在尝试将随机排序的 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>

【问题讨论】：

有些事情不清楚...你想如何将值存储在数组中？只有订单号还是表格行中的所有数据？ “nl”是您要填充的数组吗？我试着更具体一些。最后，我想要一个可以“打印”到占位符 <p id="orderdisplay"></p> 的数组或字符串，例如 order 的 [1, 2, 4, 6, 5, 7, 8, 9] （这是类，并表示行在开头的位置）。到目前为止，nl 是类 order 的所有内部 HTML 条目的列表。回答您的问题：在nl（或最后调用的任何变量）中应该只存储order 数字，而不是该行的每个条目。 【参考方案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>

【讨论】：

但是我仍然没有所有order-classes 的innerHTML 数组，对吗？例如如果在将数组转换为字符串 (var str = nl.toString();) 后，我通过 document.getElementById("orderdisplay").innerHTML = str; 将变量打印到占位符 <p id="orderdisplay"></p> 中，它仍然只显示一个数字。如果您试图将元素的.innerHTML 放入数组中，您可以使用Array.from() 或将.map() 链接到var orderlist = [...document.getElementsByClassName("order")].map((innerHTML) => innerHTML) 就是这样。谢谢！

function findOrder()   var orderlist = [...document.getElementsByClassName("order")].map((innerHTML)=&gt;innerHTML);   console.log(Array.isArray(orderlist));   document.getElementById("orderdisplay").innerHTML=orderlist;

以上是关于从 .innerHTML 到 Array 或 String 的 NodeList的主要内容，如果未能解决你的问题，请参考以下文章

innerHTML innerText的使用和区别

Javascript:: 从 innerHTML 到 appendChild

innerHTML（或其他方法）：将 li 附加到 ul，其中 <input/> 包括属性

JS基础

如何在 Laravel 中使用 innerHTML 打印数组

如何从插入到 innerHtml 的单选按钮中获取值