Golang React JS Technology Blog

Highlight and get the details of table row on click using JavaScript

Example

ID Company
100 Abc
101 Def
102 Ghi 
<!DOCTYPE html>
<html>
<head>
<style>
.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 {
    color: red;
}
</style>
</head>
<body>
<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>
highlight_row();
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;
            alert(msg);
        }
    }

}
</script>
</body>
</html>
Most Helpful This Week
How to scroll page to particular Div on click using jQuery? Generate random password for form field on click using JavaScript jQuery simple form with name and email validations JavaScript check if first string contains all characters of second string Edit the text of label on click using jQuery How to change text color on click using JavaScript?