How To Change Selected HTML Table Row Background Color Using Javascript [ with Source code ]

In This Javascript Tutorial we will See How To Set Background Color To The Selected HTML Table Row On Row Click In JS And Netbeans Editor .

Subscribe : https://www.youtube.com/channel/UCS3W5vFugqi6QcsoAIHcMpw

Project Source Code:


<!DOCTYPE html>
<html>
    <head>
        <title> Set Background Color To Selected Table TR </title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
             tr{cursor: pointer; transition: all .25s ease-in-out}
            .selected{background-color: red; font-weight: bold; color: #fff;}
            
        </style>
        
    </head>
    <body>
        
        <table id="table" border="1">
            
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>A1</td>
                <td>B1</td>
                <td>C1</td>
            </tr>
            <tr>
                <td>A2</td>
                <td>B2</td>
                <td>C2</td>
            </tr>
            <tr>
                <td>A3</td>
                <td>B3</td>
                <td>C3</td>
            </tr>
            <tr>
                <td>A4</td>
                <td>B4</td>
                <td>C4</td>
            </tr>
            <tr>
                <td>A5</td>
                <td>B5</td>
                <td>C5</td>
            </tr>
            <tr>
                <td>A6</td>
                <td>B6</td>
                <td>C6</td>
            </tr>
            <tr>
                <td>A7</td>
                <td>B7</td>
                <td>C7</td>
            </tr>
            <tr>
                <td>A8</td>
                <td>B8</td>
                <td>C8</td>
            </tr>
            
        </table>
        
        <script>
            
            function selectedRow(){
                
                var index,
                    table = document.getElementById("table");
            
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                         // remove the background from the previous selected row
                        if(typeof index !== "undefined"){
                           table.rows[index].classList.toggle("selected");
                        }
                        console.log(typeof index);
                        // get the selected row index
                        index = this.rowIndex;
                        // add class selected to the row
                        this.classList.toggle("selected");
                        console.log(typeof index);
                     };
                }
                
            }
            selectedRow();
        </script>
    </body>
</html>

#js #javascript