Отметить конкретную строку таблицы

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];
                    }
                }
            }

Я хочу выделить идентификатор продукта = 2 с помощью fx. Красная точка или значок вне таблицы:

Есть предложения?

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>