标记特定表格行

Question

我有一张桌子-与下面的桌子相似：

这是我创建表格的方式：

var table = document.getElementById("table");

            while (0 < table.rows.length) {
                table.deleteRow(0);
            }

            for (var i = dataRaw.length; i > 0; i--) {
                var r = dataRaw[i - 1];
                var row = table.insertRow(0);
                row.id = r[0];
                for (var x = 0; x < r.length; x++) {

                    if (i === 1) {
                        var headerCell = document.createElement("TH");
                        headerCell.innerHTML = r[x];
                        row.appendChild(headerCell);
                    } else {
                        var cell = row.insertCell(x);
                        cell.innerHTML = r[x];
                    }
                }
            }

我想用fx突出显示产品ID = 2。在表格外的红点或图标处：

有什么建议吗？

Answer 1

一种选择是使用::before选择器：

const dataRaw = [
  ['ID', 'Name', 'Quality'],
  [0, 'Foo', '25%'],
  [1, 'Bar', '50%'],
  [2, 'Baz', '75%']
];
const table = document.getElementById("table");
const activeID = 2;

while (0 < table.rows.length) {
    table.deleteRow(0);
}

for (var i = dataRaw.length; i > 0; i--) {
    var r = dataRaw[i - 1];
    var row = table.insertRow(0);
    row.id = r[0];
    for (var x = 0; x < r.length; x++) {
        if (i === 1) {
            var headerCell = document.createElement("TH");
            headerCell.innerHTML = r[x];
            row.appendChild(headerCell);
        } else {
            var cell = row.insertCell(x);
            if (i - 1 === activeID) {
              cell.className += 'active';
            }
            cell.innerHTML = r[x];
        }
    }
}

table {
  margin: 15px;
}

td.active::before {
  position: absolute;
  left: 10px;
  content: '•';
  color: red;
}

<table id="table">
</table>