【问题标题】：Unable to asign value to a table row using innerHTML无法使用 innerHTML 为表格行赋值
【发布时间】：2021-09-26 15:33:48
【问题描述】：

我有这个脚本可以按数字对所有 tr 进行排序，而且似乎一切正常，但是当它使用 innerHTML 将新值分配给每个表行时，具有排序表行的数组开始随机更改其值值被分配给一行，我不知道为什么：

这是代码：

运行 sn-p 看看我的意思，谢谢。

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

【问题讨论】：

标签： javascript html dom html-table innerhtml

【解决方案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>

【讨论】：

我之前放弃了这种可能性，因为我虽然如果数组是排序的，那么 tr 也会是，但是因为你，我对它有了更多的了解，现在我明白了，非常感谢！ !