CODEWITHSUNDEEP
javascriptjquery
KratosMafia
KratosMafia

Reputation: 333

javascript highlight multiple rows

I have looked all over but can't find a good answer. So what I'm wanting to do is highlight multiple rows on a table Then if you click on a highlighted row it gets un-highlighted.

All of this works for me. The problem I'm having is when I un-highlight a row for some reason it won't highlight again.

 function highlight_row() {

        var table = document.getElementById("display-table");
        var cells = table.getElementsByTagName('td');

        for (var i = 0; i < cells.length; i++) {

            var cell = cells[i];

                cell.onclick = function () {

                    var rowId = this.parentNode.rowIndex;


                    var rowSelected = table.getElementsByTagName('tr')[rowId];
                    rowSelected.className += "selected";
                    $(cell).toggleClass('selected');

                }

        }
    }

I have changed out $(cell) with $(this) and that works but only re highlighting the cell I click on and not the whole row.

I'm at a lose here.

Thanks

Upvotes: 2

Views: 225

Answers (1)

PD81
PD81

Reputation: 20631

If you want to highlight the whole row, you need to get parent tr

            cell.onclick = function () {
                $(this).parent('tr').toggleClass('selected');
            }

Upvotes: 1

Related Questions