无法使用 innerHTML 为 table 行赋值

Question

我有这个脚本来按数字对所有 tr 进行排序，并且一切似乎都有效，但是当需要使用 innerHTML 为每个 table 行分配新值时，排序后的数组 table 行开始随机更改其值，每次将值分配给行，我不知道为什么：

代码如下：

运行看我的意思的片段，谢谢。

"use strict"

let table = document.getElementById("grid");
let tableHead = table.querySelector("thead");

tableHead.addEventListener("click",event=>{
    let tbody = table.getElementsByTagName("tbody")[0];
    let rows = tbody.getElementsByTagName("tr");
    let arr = null;

    switch(event.target.dataset.type) {
        case "number":
            arr = Array.from(rows).sort((a,b)=>{
                return +a.firstElementChild.innerHTML > +b.firstElementChild.innerHTML ? 1: -1;
            });
            break;
        case "string":
            break;
    }
   

for(let i = 0; i < rows.length; i++) {
    console.log(rows[i].innerHTML,"rows");//Shows the current order
}
for(let i = 0; i < arr.length;i++) {
    console.log(arr[i].innerHTML,"arr"); //Shows the sorted table rows as expected
}

for(let i = 0; i < arr.length;i++) {
    rows[i].innerHTML = arr[i].innerHTML; //But now arr have randoms values!!
}
});

table{
    border: 1px solid black;
    border-spacing: 0px;
}
td, th{
    border: 1px solid rgb(0, 0, 0);
    margin: 0px;
    padding: 0.5rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
</head>
<body>
    <table id="grid">
    <thead>
      <tr>
        <th data-type="number">Age</th>
        <th data-type="string">Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>5</td>
        <td>John</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Pete</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Ann</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Eugene</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ilya</td>
      </tr>
    </tbody>
  </table>

    <script src="script.js"></script>
</body>
</html>

Answer 1

这是因为 rows 和 arr 数组都包含相同的元素对象，所以改变一个数组中的元素会改变另一个数组中的元素。在这种特殊情况下，您可以简单地将行附加到 tbody 而不是：

"use strict"

let table = document.getElementById("grid");
let tableHead = table.querySelector("thead");

tableHead.addEventListener("click",event=>{
    let tbody = table.getElementsByTagName("tbody")[0];
    let rows = tbody.getElementsByTagName("tr");
    let arr = null;

    switch(event.target.dataset.type) {
        case "number":
            arr = Array.from(rows).sort((a,b)=>{
                return +a.firstElementChild.innerHTML > +b.firstElementChild.innerHTML ? 1: -1;
            });
            break;
        case "string":
            break;
    }
   

for(let i = 0; i < rows.length; i++) {
    console.log(rows[i].innerHTML,"rows");//Shows the current order
}
for(let i = 0; i < arr.length;i++) {
    console.log(arr[i].innerHTML,"arr"); //Shows the sorted table rows as expected
}

for(let i = 0; i < arr.length;i++) {
    tbody.appendChild(arr[i]);
//    rows[i].innerHTML = arr[i].innerHTML; //But now arr have randoms values!!
}
});

table{
    border: 1px solid black;
    border-spacing: 0px;
}
td, th{
    border: 1px solid rgb(0, 0, 0);
    margin: 0px;
    padding: 0.5rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
</head>
<body>
    <table id="grid">
    <thead>
      <tr>
        <th data-type="number">Age</th>
        <th data-type="string">Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>5</td>
        <td>John</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Pete</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Ann</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Eugene</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Ilya</td>
      </tr>
    </tbody>
  </table>

    <script src="script.js"></script>
</body>
</html>

无法使用 innerHTML 为 table 行赋值

Unable to asign value to a table row using innerHTML

html

javascript

dom

html-table

innerhtml

代码如下：