Tr 没有更新其 class

Question

我想在 table selectable 中创建一行，但是每当我单击该行时，控制台日志都会显示它做了正确的事情，但没有改变它的 class。为什么会这样，我该如何解决？

生成 select 功能的部分代码：

    var tableconn = document.getElementById("connectionsLane"+laneid);
        let row = tableconn.insertRow();
        row.id = "row"+insertData.id;
    row.onclick = function() {
        if (row.classList.contains("selected")) {
            console.log("unselected");
            row.classList.remove("selected");
        } else {
            console.log("selected")
            document.getElementById("row" + insertData.id).classList.add("selected");
        }
    }

insertData.id 每次调用整个过程时都会增加 1，而 laneid 取决于用户当前引用的网站部分（是 1-255 整数）

Answer 1

这是一个简单示例，说明如何 select 行 table 并使用函数设置样式。此函数可用于在文档中的任何 table 行中设置 class 名称。

// for setting the class name on a row in a table
const onrowselect = e => {
  let table = e.target.closest('table');
  let trs = table.querySelectorAll('tr');
  // remove all class=selected
  trs.forEach(tr => tr.classList.remove('selected'));
  // the current tr
  var tr = e.target.closest('tr');
  tr.classList.add('selected');
};

// define a table
var table01 = document.getElementById('table01');
// add and eventlistener to the table
table01.addEventListener('click', onrowselect);

tr {
  cursor: pointer;
}

.selected {
  background-color: silver;
}

<table id="table01">
  <tr>
    <td>Row</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Row</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Row</td>
    <td>3</td>
  </tr>
</table>

Tr 没有更新其 class

Tr is not updating its class

html

javascript

datatable