Menu ▼

Previous Next

Change table row background colour on mouse over-move using JavaScript :

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

Heading
Row 1
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6


Code Sample :

<html>

<head>

    <title>Change table row background colour on mouse over-move using JavaScript</title>

</head>

<body>

    <table align="center" id="tblMain" style="border: solid 1px black;" cellpadding="0"

        cellspacing="0" width="200px">

        <th>

            Heading

        </th>

        <tr>

            <td>

                Row 1

            </td>

        </tr>

        <tr>

            <td>

                Row 1

            </td>

        </tr>

        <tr>

            <td>

                Row 2

            </td>

        </tr>

        <tr>

            <td>

                Row 3

            </td>

        </tr>

        <tr>

            <td>

                Row 4

            </td>

        </tr>

        <tr>

            <td>

                Row 5

            </td>

        </tr>

        <tr>

            <td>

                Row 6

            </td>

        </tr>

    </table>

    <script language="javascript">

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

        if (tbl != null) {

            if (tbl.rows[0] != null) {

                tbl.rows[0].style.backgroundColor = "#365890";

                tbl.rows[0].style.color = "#FFFFFF";

            }

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

                tbl.rows[i].style.cursor = "pointer";

                tbl.rows[i].onmousemove = function () { this.style.backgroundColor = "#FF2080"; this.style.color = "#FFFFFF"; };

                tbl.rows[i].onmouseout = function () { this.style.backgroundColor = ""; this.style.color = ""; };

            }

        }

    </script>

</body>

</html>

 

Previous Next




Search dotnetlearners.com