JavaScript 手动重新排列 HTML table 中的行

Question

这是我如何获得 table:

var table = document.getElementById(tableId);

这里只有 table 行没有页眉和页脚，基本上只有 table 正文：

var tableBodyRowsONLY = table.getElementsByTagName('tbody').item(0).getElementsByTagName('tr');

这是获取一行然后将其插入回 table 的代码：

    var tempSaveRow;

    for (var x = 0; x < tableBodyRowsONLY.length ; x++) {          
        tempSaveRow = tableBodyRowsONLY[x].innerHTML;
        console.log(tableBodyRowsONLY[x]);
    }

    var row = table.insertRow(2);
    row.innerHTML = tempSaveRow;

不用担心循环，它现在只需要最后一行（仍在进行中）。

我的问题是，当该行返回到 table 时，它丢失了与该行关联的所有 css 类。我该如何解决？也许有更好的实施方式？

Answer 1

使用 outerHTML 而不是 innerHTML。这样您还将替换行元素本身，包括它的所有属性。在您当前的代码中，您仅将行的内容移动到没有任何属性的新空行。

JavaScript 手动重新排列 HTML table 中的行

JavaScript manually re-arrange rows in HTML table

javascript

html-table