Jump to content

table crosshair hover

golles

By golles
in Javascript Help

Recommended Posts

golles Member

golles

Posted
Posted

Guys, I found a script that does a crosshair hover on a table. (Online example)

 

I was testing and noticed that does the crosshair hover on every table on the page. I would like to do the crsoohair hover on just one table with a class or id.

the problem is that I don't know how to do this...

 

<html>
<head>
<style type="text/css">

.hoverRow {
background-color: #FFFF00;
}
.hoverColumn {
background-color: #FFFF00;
}
.hoverCell {
background-color: #FFFF00;
}

</style>
<script type="text/javascript">

    function hoverOver()
    {
        this.parentNode.className = "hoverRow";

        var rowElements = this.parentNode.parentNode.childNodes;
        // Check in which column the this cell object is at the moment.
        var column = 0;
        var o = this;
        while (o = o.previousSibling) column++;
        for (var row = 0; row < rowElements.length; row++)
        {
            if (rowElements[row].nodeType != 1) continue;
            rowElements[row].childNodes[column].className = "hoverColumn";
        }

        this.className = "hoverCell";
    }

    function hoverOut()
    {
        this.parentNode.className = "";

        var rowElements = this.parentNode.parentNode.childNodes;
        // Check in which column the this cell object is at the moment.
        var column = 0;
        var o = this;
        while (o = o.previousSibling) column++;
        for (var row = 0; row < rowElements.length; row++)
        {
            if (rowElements[row].nodeType != 1) continue;
            rowElements[row].childNodes[column].className = "";
        }
    }

    function init()
    {
        var rowElements = document.getElementsByTagName("tr");
        for (var row = 0; row < rowElements.length; row++)
        {
            columnElements = rowElements[row].childNodes;
            for (var column = 0; column < columnElements.length; column++)
            {
                columnElements[column].onmouseover = hoverOver;
                columnElements[column].onmouseout = hoverOut;
            }
        }
    }

window.onload=init;
</script>
</head>
<body>

        <table border="1" cellspacing="0">
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
			<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
			<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
			<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
			<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
			<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
        </table>

<br /><br /><br /><br /><br /><br />

        <table border="1" cellspacing="0" class="onlythis" id="onlythis">
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
        </table>

</body>
</html>

note: this is just a temp test file!

Link to comment
https://forums.phpfreaks.com/topic/146679-table-crosshair-hover/
Share on other sites
KevinM1 Advanced Member

KevinM1

Posted
Posted

Guys, I found a script that does a crosshair hover on a table. (Online example)

 

I was testing and noticed that does the crosshair hover on every table on the page. I would like to do the crsoohair hover on just one table with a class or id.

the problem is that I don't know how to do this...

 

<html>
<head>
<style type="text/css">

.hoverRow {
background-color: #FFFF00;
}
.hoverColumn {
background-color: #FFFF00;
}
.hoverCell {
background-color: #FFFF00;
}

</style>
<script type="text/javascript">

    function hoverOver()
    {
        this.parentNode.className = "hoverRow";

        var rowElements = this.parentNode.parentNode.childNodes;
        // Check in which column the this cell object is at the moment.
        var column = 0;
        var o = this;
        while (o = o.previousSibling) column++;
        for (var row = 0; row < rowElements.length; row++)
        {
            if (rowElements[row].nodeType != 1) continue;
            rowElements[row].childNodes[column].className = "hoverColumn";
        }

        this.className = "hoverCell";
    }

    function hoverOut()
    {
        this.parentNode.className = "";

        var rowElements = this.parentNode.parentNode.childNodes;
        // Check in which column the this cell object is at the moment.
        var column = 0;
        var o = this;
        while (o = o.previousSibling) column++;
        for (var row = 0; row < rowElements.length; row++)
        {
            if (rowElements[row].nodeType != 1) continue;
            rowElements[row].childNodes[column].className = "";
        }
    }

    function init()
    {
        var rowElements = document.getElementsByTagName("tr");
        for (var row = 0; row < rowElements.length; row++)
        {
            columnElements = rowElements[row].childNodes;
            for (var column = 0; column < columnElements.length; column++)
            {
                columnElements[column].onmouseover = hoverOver;
                columnElements[column].onmouseout = hoverOut;
            }
        }
    }

window.onload=init;
</script>
</head>
<body>

        <table border="1" cellspacing="0">
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
			<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
			<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
			<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
			<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
			<td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
            </tr>
        </table>

<br /><br /><br /><br /><br /><br />

        <table border="1" cellspacing="0" class="onlythis" id="onlythis">
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
            <tr>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>
                <td>Some Table Data</td>

                <td>Some Table Data</td>
            </tr>
        </table>

</body>
</html>

note: this is just a temp test file!

 

Give your table a unique id.  Then, modify the init function to be:

function init()
{
   var myTable = document.getElementById('tableId'); //<-- use whatever id you want
   var rowElements = myTable.getElementsByTagName('tr'); //<-- retrieve just that table's rows

   /* use the rest of the function as-is */
}

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.