Page 1 of 1

How to make cells in my table mouseover effect

Posted: Sat Mar 13, 2010 1:42 pm
by adsegzy
Hello friends, please i need the cells in my table to respond to mouseover. how do i do this.

regards

Re: How to make cells in my table mouseover effect

Posted: Sat Mar 13, 2010 1:56 pm
by s.dot
Easy with CSS:

Code: Select all

td:hover { background-color: #fff; }

Re: How to make cells in my table mouseover effect

Posted: Sat Mar 13, 2010 4:27 pm
by McInfo
This example demonstrates how to apply event attributes to multiple elements.

table.php

Code: Select all

<html>
    <head>
        <title>Example</title>
        <script type="text/javascript" src="./behavior.js"></script>
    </head>
    <body>
        <table id="colorful">
            <tbody>
                <?php for ($row = 0; $row < 10; $row++) : ?>
                    <tr>
                        <?php for ($col = 0; $col < 10; $col++) : ?>
                            <td><?php
                                // Displays the column and row number in the cell
                                printf('%02u:%02u', $row, $col);
                            ?></td>
                        <?php endfor; ?>
                    </tr>
                <?php endfor; ?>
            </tbody>
        </table>
    </body>
</html>
behavior.js

Code: Select all

/* JavaScript */
// This will happen after the document elements have been created
window.onload = function () {
    // Gets all of the elements to be modified (all cells in the table)
    var tds = document.getElementById('colorful').getElementsByTagName('td');
    // Tracks how many cells have been moused over
    var counter = 0;
    // Loops through the elements
    for (var i = 0; i < tds.length; i++) {
        // Applies an onmouseover event attribute
        tds[ i ].onmouseover = function () {
            // "this" refers to tds[ i ]
            this.style.color = 'white';
            this.style.backgroundColor = 'gray';
            // Changes the cell content and increments the counter
            this.innerHTML = counter++;
        }
        // Applies an onmouseout event attribute
        tds[ i ].onmouseout = function () {
            this.style.color = 'blue';
            this.style.backgroundColor = 'silver';
        }
    }
}
To assign an event to a single element, you can simply apply the attribute inline.

Code: Select all

<td onclick="alert('Hello, I am Cell 123.'); alert('You look familiar...');">123</td>
Edit: This post was recovered from search engine cache.