Change Selected HTML Table Row Background Color
Affichage des articles dont le libellé est Change Selected HTML Table Row Background Color. Afficher tous les articles
Affichage des articles dont le libellé est Change Selected HTML Table Row Background Color. Afficher tous les articles

Javascript - Highlight Checked Table Row

1 Comment

How To Highlight Checked Table Row Using Radio Button In Javascript  

Checked Table Row


In This Javascript Tutorial we will See How To Set A BackGround Color To The Checked HTML Table TR On Radio Button Checked In JS And Netbeans Editor .


Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Highlight Selected Table Row Using Radio Button</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            tr{transition: all ease-in-out .25s}
            .selected{background-color:blue;color:#fff;font-weight: bold}
            
        </style>
        
    </head>
    <body>
        
        <table id="table" border="1">
            <tr id="first-tr">
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
                <th>Select</th>
            </tr>
            
            <tr>
                <td>AAAA</td>
                <td>BBBB</td>
                <td>10</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>CCCC</td>
                <td>DDDD</td>
                <td>20</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>EEEE</td>
                <td>FFFF</td>
                <td>30</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>GGGG</td>
                <td>HHHH</td>
                <td>40</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>IIII</td>
                <td>JJJJ</td>
                <td>50</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>EEEE</td>
                <td>FFFF</td>
                <td>30</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>GGGG</td>
                <td>HHHH</td>
                <td>40</td>
                <td><input type="radio" name="select"></td>
            </tr>
            <tr>
                <td>IIII</td>
                <td>JJJJ</td>
                <td>50</td>
                <td><input type="radio" name="select"></td>
            </tr>
        </table>
        
        <script>
            
            function selectRow(){
        
                var radios = document.getElementsByName("select");
                for( var i = 0; i < radios.length; i++ )
                {
                    radios[i].onclick = function()
                    {
                        // remove class from the other rows
                        
                        var el = document.getElementById("first-tr");
                        
                        // go to the nex sibing
                        while(el = el.nextSibling)
                        {
                            if(el.tagName === "TR")
                            {
                                // remove the selected class
                                el.classList.remove("selected");
                            }
                        }
                        
                     // radio  -      td      -          tr 
                        this.parentElement.parentElement.classList.toggle("selected");
                    };
                }
        
            }
            selectRow();
        </script>    
        
    </body>
</html>

OUTPUT:

Highlight Checked Table Row Using Javascript

Javascript - Change Selected HTML Table Row Background Color

Add Comment

How To Change HTML Table Selected Row Background Color Using JavaScript 

set Background Color to selected html table row


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 .


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>

OUTPUT:

Set Background Color To Selected Table Row



Inscription à : Articles (Atom)