Javascript：随机排列表行

Question

是否有可能在每次单击按钮/图标（除了第一个带有标题的按钮/图标）时打乱表格行并使它们随机出现？类似于 w3schools 的“如何对表进行排序”（https://www.w3schools.com/howto/howto_js_sort_table.asp），但表会随机排序。

另一种可能性是使用 JavaScript 数组排序，但我不知道如何使表行显示为数组的内容。

https://jsfiddle.net/17bjxgfa/1/

我更喜欢普通的 JS 解决方案而不是 jQuery。

这是我们可以使用的示例表：

.table-div {
  padding-top: 1rem;
}

<div class="table-div">
  <table id="myTable">
    <tr>
      <th class="button"><button class="my-btn" type="button" onclick="sortTable()">
        shuffle</button></th>
      <th>Text:</th>
      <th></th>
    </tr>

    <tr>
      <td class="left">Some text 1</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
                check</button></td>
    </tr>

    <tr>
      <td class="left">Some text 2</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
                check</button></td>
    </tr>

    <tr>
      <td class="left">Some text 3</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
                check</button></td>
    </tr>

    <tr>
      <td class="left">Some text 4</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
                check</button></td>
    </tr>

    <tr>
      <td class="left">Some text 5</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
                check</button></td>
    </tr>

    <tr>
      <td class="left">Some text 6</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
                check</button></td>
    </tr>

    <tr>
      <td class="left">Some text 7</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
                check</button></td>
    </tr>

Answer 1

您可以执行以下操作：

1. 使用类似或的查找来获取表的所有行，document.getElementsByTagName如果您想要更具体一点 - document.querySelectorAll。
2. 它们返回一个HTMLCollection，因此您可以将其转换为数组。
3. 打乱数组。
4. 将其添加回表中 - 由于节点不能在 DOM 中出现两次，这会移动它们，因此您不必先手动删除它们。

function sortTable() {
  //get the parent table for convenience
  let table = document.getElementById("myTable");

  //1. get all rows
  let rowsCollection = table.querySelectorAll("tr");

  //2. convert to array
  let rows = Array.from(rowsCollection)
    .slice(1); //skip the header row

  //3. shuffle
  shuffleArray(rows);

  //4. add back to the DOM
  for (const row of rows) {
    table.appendChild(row);
  }
}


/**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 * from: https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array/12646864#12646864
 */
function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}

.table-div {
  padding-top: 1rem;
}

<div class="table-div">
  <table id="myTable">
    <tr>
      <th class="button"><button class="my-btn" type="button" onclick="sortTable()">
    shuffle</button></th>
      <th>Text:</th>
      <th></th>
    </tr>

    <tr>
      <td class="left">Some text 1</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
            check</button></td>
    </tr>

    <tr>
      <td class="left">Some text 2</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
            check</button></td>
    </tr>

    <tr>
      <td class="left">Some text 3</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
            check</button></td>
    </tr>

    <tr>
      <td class="left">Some text 4</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
            check</button></td>
    </tr>

    <tr>
      <td class="left">Some text 5</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
            check</button></td>
    </tr>

    <tr>
      <td class="left">Some text 6</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
            check</button></td>
    </tr>

    <tr>
      <td class="left">Some text 7</td>
      <td><input type="text"></td>
      <td class="right">more text.</td>
      <td class="button"><button class="my-btn" type="button">
            check</button></td>
    </tr>