Mark specific table row

Question

I have a table- similar to the one below:

This is how I create my table:

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

I want to highlight product ID = 2 with fx. At red dot or icon outside of the table:

Any suggestions?

Answer 1

One option would be to use the ::before selector:

 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>