CODEWITHSUNDEEP
javascriptarrayshtml-tableinnerhtmlnodelist
Falk
Falk

Reputation: 86

NodeList from .innerHTML to Array or String

I am trying to save cell entries of a randomly sorted HTML table to a variable in JavaScript. I am so far that I get a nodeliste of the first column at the click of a button. My question is, how can I convert this NodeListe into an array? I have tried different things like Array.prototype.slice.call (nl); inside the findOrder function (inside for declaration) but it does not seem to have been very successful, since the individual entries appear as an array instead of all the entries in one array.

Working code:

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>

Upvotes: 0

Views: 1369

Answers (1)

guest271314
guest271314

Reputation: 1

orderlist is actually an HTMLCollection. You can convert NodeList or HTMLCollection to an Array using spread element

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>

Upvotes: 1

Related Questions