Breaking News: Grepper is joining You.com. Read the official announcement!

highlight row javascript

adens answered on April 11, 2022 Popularity 3/10 Helpfulness 1/10

answer highlight row javascript

highlight row javascript

Comment

<html>
<head>
  <title>highlighting the table rows onclick using pure JS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style id="compiled-css" type="text/css">
      .table-layout {
    text-align: center;
    border: 1px solid black;
    border-collapse: collapse;
    font-family:"Trebuchet MS";
    margin: 0 auto 0;
}
.table-layout td, .table-layout th {
    border: 1px solid grey;
    padding: 5px 5px 0;
}
.table-layout td {
    text-align: left;
}
.selected {<!--  w  w w .d e  m o  2 s  .com-->
    color: red;
}
    
  </style>
</head>
<body>
    <!-- highlighting the table rows onclick -->
<table id="display-table" class="table-layout">
    <thead>
        <th>ID</th>
        <th>Company</th>
    </thead>
    <tbody>
        <tr>
            <td>100</td>
            <td>Abc</td>
        </tr>
        <tr>
            <td>101</td>
            <td>Def</td>
        </tr>
        <tr>
            <td>102</td>
            <td>Ghi</td>
        </tr>
    </tbody>
</table>
    <script type='text/javascript'>
function highlight_row() {
    var table = document.getElementById('display-table');
    var cells = table.getElementsByTagName('td');
    for (var i = 0; i < cells.length; i++) {
        // Take each cell
        var cell = cells[i];
        // do something on onclick event for cell
        cell.onclick = function () {
            // Get the row id where the cell exists
            var rowId = this.parentNode.rowIndex;
            var rowsNotSelected = table.getElementsByTagName('tr');
            for (var row = 0; row < rowsNotSelected.length; row++) {
                rowsNotSelected[row].style.backgroundColor = "";
                rowsNotSelected[row].classList.remove('selected');
            }
            var rowSelected = table.getElementsByTagName('tr')[rowId];
            rowSelected.style.backgroundColor = "yellow";
            rowSelected.className += " selected";
            msg = 'The ID of the company is: ' + rowSelected.cells[0].innerHTML;
            msg += '\nThe cell value is: ' + this.innerHTML;
            console.log(msg);
        }
    }
} //end of function
window.onload = highlight_row;
  </script>
</body>
</html>

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: www.demo2s.com

Tags: highlight javascript row

Link to this answer
Share Copy Link

Contributed on Apr 11 2022

adens

0 Answers Avg Quality 2/10

highlight row javascript

Contents

More Related Answers

highlight row javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.