JavaScript - HTML Table Row And Cell Index

How To Get HTML Table Row And Cell Index Using Javascript

html table cell and row index


In This Javascript Tutorial we will See How To Get And Show Html Table Rows And Cells Index In Row Click Event Using JS And Netbeans Editor .


Project Source Code:



<!DOCTYPE html>
<html>
    <head>
        <title>Get HTML Table TR And TD Index</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            td:hover{background-color:#ddd;;cursor: pointer}
            .selected{background-color: red;color: #fff;font-weight: bold}
        </style>
    </head>
    <body>
       
        <table id="table" border="1">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
            
            <tr>
                <td>FN1</td>
                <td>LN1</td>
                <td>10</td>
            </tr>
            
            <tr>
                <td>FN2</td>
                <td>LN2</td>
                <td>20</td>
            </tr>
            
            <tr>
                <td>FN3</td>
                <td class="selected">LN3</td>
                <td>30</td>
            </tr>
            
            <tr>
                <td>FN4</td>
                <td>LN4</td>
                <td>40</td>
            </tr>
            
            <tr>
                <td>FN5</td>
                <td>LN5</td>
                <td>50</td>
            </tr>
        </table>
        
        <script>
            
            var table = document.getElementById("table"),rIndex,cIndex;
            
            // table rows
            for(var i = 1; i < table.rows.length; i++)
            {
                // row cells
                for(var j = 0; j < table.rows[i].cells.length; j++)
                {
                    table.rows[i].cells[j].onclick = function()
                    {
                        rIndex = this.parentElement.rowIndex;
                        cIndex = this.cellIndex+1;
                        console.log("Row : "+rIndex+" , Cell : "+cIndex);
                    };
                }
            }
            
        </script>
    </body>
</html>


OUTPUT:

htm table selected td index
Row : 3 , Cell : 2




Share this

Related Posts

Previous
Next Post »

3 comments

comments
6 mars 2019 à 02:12 delete

how to take those value outside the function

Reply
avatar
13 juin 2020 à 22:27 delete

Is it able to use arrow key instead of using mouse click to control the table?

Reply
avatar