Menu ▼

Previous Next

Find table cell value on cell (table) click using JavaScript :

Example:
-------------

R1C1 R1C2 R1C3 R1C4
R2C1 R2C2 R2C3 R2C4
R3C1 R3C2 R3C3 R3C4
R4C1 R4C2 R4C3 R4C4


Code Sample :

<html>

<head>

    <title>Find table cell value on cell (table) click using JavaScript</title>

</head>

<body>

    <center>

        Click on below table cell to find its value.

        <br />

        <br />

    </center>

    <table align="center" id="tblMain" border="1" style="cursor: pointer;">

        <tr>

            <td>

                R1C1

            </td>

            <td>

                R1C2

            </td>

            <td>

                R1C3

            </td>

            <td>

                R1C4

            </td>

        </tr>

        <tr>

            <td>

                R2C1

            </td>

            <td>

                R2C2

            </td>

            <td>

                R2C3

            </td>

            <td>

                R2C4

            </td>

        </tr>

        <tr>

            <td>

                R3C1

            </td>

            <td>

                R3C2

            </td>

            <td>

                R3C3

            </td>

            <td>

                R3C4

            </td>

        </tr>

        <tr>

            <td>

                R4C1

            </td>

            <td>

                R4C2

            </td>

            <td>

                R4C3

            </td>

            <td>

                R4C4

            </td>

        </tr>

    </table>

    <br />

    <script language="javascript">

 

        var tbl = document.getElementById("tblMain");

        if (tbl != null) {

            for (var i = 0; i < tbl.rows.length; i++) {

                for (var j = 0; j < tbl.rows[i].cells.length; j++)

                    tbl.rows[i].cells[j].onclick = function () { getval(this); };

            }

        }

 

        function getval(cel) {

            alert(cel.innerHTML);

        }

    </script>

</body>

</html>

 

 

Previous Next




Search dotnetlearners.com