Javascript 表格和鼠标翻转效果（悬停）_Javascript_Html_Css_Hover_Html Table

Javascript 表格和鼠标翻转效果（悬停）

javascript html css

Javascript 表格和鼠标翻转效果（悬停）,javascript,html,css,hover,html-table,Javascript,Html,Css,Hover,Html Table,我有这张桌子： <table border="1"> <tr> <td></td> <td>Banana</td> <td>Orange</td> <td>Plum</td> </tr> <tr> <td>Banana</td> <td>1:1</td>

我有这张桌子：

<table border="1">
<tr>
    <td></td>
    <td>Banana</td>
    <td>Orange</td>
    <td>Plum</td>
</tr>
<tr>
    <td>Banana</td>
    <td>1:1</td>
    <td>1:2</td>
    <td>1:3</td>
</tr>
<tr>
    <td>Orange</td>
    <td>2:1</td>
    <td>1:1</td>
    <td>1,5:1</td>
</tr>
<tr>
    <td>Plum</td>
    <td>1:3</td>
    <td>2:1</td>
    <td>1:1</td>
</tr>

我想做的是，例如，当我将鼠标指向1:3的表格单元格时，它应该与香蕉和李子单元格一起高亮显示

有什么简单的方法吗

这是小提琴：

下面是我的一个网站（css）的示例：

希望有帮助

哦，还有视图：

下面是我的一个网站（css）的一个示例：

希望有帮助

哦，还有一个视图：

如果你不介意用一点Javascript来确保兼容性，看看这个

HTML:

JS:

函数firefoxFix（）{ if（/firefox/.test（window.navigator.userAgent.toLowerCase（））{ var tds=document.getElementsByTagName（'td'）；对于（var指数=0；指数如果您不介意在其中添加一点Javascript以确保兼容性，请看一下这个

HTML:

JS:

函数firefoxFix（）{ if（/firefox/.test（window.navigator.userAgent.toLowerCase（））{ var tds=document.getElementsByTagName（'td'）；对于（var指数=0；指数试试这个：

无需更改html结构或添加任何第三方库：

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var tds = document.getElementsByTagName('td');
        for (var i = 0; i < tds.length; i++) {
            var elem = document.getElementsByTagName('td')[i];
            elem.addEventListener('mouseover', function () {
                var text = this.innerHTML;
                for (var j = 0; j < tds.length; j++) {
                    var elem2 = document.getElementsByTagName('td')[j];
                    if (elem2.innerHTML == text) {
                        elem2.style.background = 'red';
                    }
                }
            }, false);
            elem.addEventListener('mouseout', function () {
                for (var j = 0; j < tds.length; j++) {
                    var elem2 = document.getElementsByTagName('td')[j];
                    var text = this.innerHTML;
                    if (elem2.innerHTML == text) {
                        elem2.style.background = 'none';
                    }
                }
            }, false);
        }
    }, false);

</script>


document.addEventListener（'DOMContentLoaded'，函数（）{
var tds=document.getElementsByTagName（'td'）；
对于（变量i=0；i

试试这个：


无需更改html结构或添加任何第三方库：
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var tds = document.getElementsByTagName('td');
        for (var i = 0; i < tds.length; i++) {
            var elem = document.getElementsByTagName('td')[i];
            elem.addEventListener('mouseover', function () {
                var text = this.innerHTML;
                for (var j = 0; j < tds.length; j++) {
                    var elem2 = document.getElementsByTagName('td')[j];
                    if (elem2.innerHTML == text) {
                        elem2.style.background = 'red';
                    }
                }
            }, false);
            elem.addEventListener('mouseout', function () {
                for (var j = 0; j < tds.length; j++) {
                    var elem2 = document.getElementsByTagName('td')[j];
                    var text = this.innerHTML;
                    if (elem2.innerHTML == text) {
                        elem2.style.background = 'none';
                    }
                }
            }, false);
        }
    }, false);

</script>


document.addEventListener（'DOMContentLoaded'，函数（）{
var tds=document.getElementsByTagName（'td'）；
对于（变量i=0；i您想要类似的东西吗？
不幸的是，需要一些javascript
HTML
<table border="1">
    <tr>
        <td></td>
        <td id='1'>Banana</td>
        <td id='2'>Orange</td>
        <td id='3'>Plum</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td class='o1'>1:1</td>
        <td class='o2'>1:2</td>
        <td class='o3'>1:3</td>
    </tr>
    <tr>
        <td>Orange</td>
        <td class='o1'>2:1</td>
        <td class='o2'>1:1</td>
        <td class='o3'>1,5:1</td>
    </tr>
    <tr>
        <td>Plum</td>
        <td class='o1'>1:3</td>
        <td class='o2'>2:1</td>
        <td class='o3'>1:1</td>
    </tr>
</table>

CSS
td {
    height:60px;
    width:60px;
    text-align:center;
}

td:hover{
    background-color:red;
}

你想要类似的东西吗？
不幸的是，需要一些javascript
HTML
<table border="1">
    <tr>
        <td></td>
        <td id='1'>Banana</td>
        <td id='2'>Orange</td>
        <td id='3'>Plum</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td class='o1'>1:1</td>
        <td class='o2'>1:2</td>
        <td class='o3'>1:3</td>
    </tr>
    <tr>
        <td>Orange</td>
        <td class='o1'>2:1</td>
        <td class='o2'>1:1</td>
        <td class='o3'>1,5:1</td>
    </tr>
    <tr>
        <td>Plum</td>
        <td class='o1'>1:3</td>
        <td class='o2'>2:1</td>
        <td class='o3'>1:1</td>
    </tr>
</table>

CSS
td {
    height:60px;
    width:60px;
    text-align:center;
}

td:hover{
    background-color:red;
}

很抱歉，我的答案只是伪代码，但是我会使用javascript（最可能是Jquery）来解决这个问题。我希望这是有意义的
<table id="tbl"> - so I would give the table an ID
<td onHover="changeHeaderColummns(this)"></td> - then on each of the columns have a jsMethod that fires.

<script>
    changeHeaderColumsn(col)
    {
        var colIndex = col.Index; //get the current column index

        var row = GetHeaderRow(); // get the header row

        highLightColumn(row, colIndex); //change the colour of the cell
                                        //with the same index in the header

        row = getCurrentRow(col.RowIndex); //now get the current row

        highlightColumn(row, 0); //change the colour of the cell
                                 //with the index of 0
    }

    getHeaderRow()
    {
         return getRow(0);
    }

    getRow(rowIndex)
    {
        var table = document.getElementByID("tbl);
        return table.rows[rowIndex];
    }

    highlightColumn(row, colIndex)
    {
         row[colIndex].style.backgroundcolor = "red";
    }

-所以我会给这个表一个ID
-然后在每个列上都有一个激发的jsMethod。
changeHeaderColumsn（col）
{
var colIndex=col.Index；//获取当前列索引
var row=GetHeaderRow（）；//获取标题行
highLightColumn（行，共索引）；//更改单元格的颜色
//标题中有相同的索引
row=getCurrentRow（col.RowIndex）；//现在获取当前行
highlightColumn（行，0）；//更改单元格的颜色
//索引为0
}
getHeaderRow（）
{
返回getRow（0）；
}
getRow（行索引）
{
var table=document.getElementByID（“tbl”）；
返回表。行[rowIndex]；
}
Highlight列（行，共索引）
{
行[colIndex].style.backgroundcolor=“红色”；
}
很抱歉，我的答案只是伪代码，但是我会使用javascript（最可能是Jquery）来解决这个问题。我希望这是有意义的
<table id="tbl"> - so I would give the table an ID
<td onHover="changeHeaderColummns(this)"></td> - then on each of the columns have a jsMethod that fires.

<script>
    changeHeaderColumsn(col)
    {
        var colIndex = col.Index; //get the current column index

        var row = GetHeaderRow(); // get the header row

        highLightColumn(row, colIndex); //change the colour of the cell
                                        //with the same index in the header

        row = getCurrentRow(col.RowIndex); //now get the current row

        highlightColumn(row, 0); //change the colour of the cell
                                 //with the index of 0
    }

    getHeaderRow()
    {
         return getRow(0);
    }

    getRow(rowIndex)
    {
        var table = document.getElementByID("tbl);
        return table.rows[rowIndex];
    }

    highlightColumn(row, colIndex)
    {
         row[colIndex].style.backgroundcolor = "red";
    }

-所以我会给这个表一个ID
-然后在每个列上都有一个激发的jsMethod。
changeHeaderColumsn（col）
{
var colIndex=col.Index；//获取当前列索引
td {
    height:60px;
    width:60px;
    text-align:center;
}

td:hover{
    background-color:red;
}

<table id="tbl"> - so I would give the table an ID
<td onHover="changeHeaderColummns(this)"></td> - then on each of the columns have a jsMethod that fires.

<script>
    changeHeaderColumsn(col)
    {
        var colIndex = col.Index; //get the current column index

        var row = GetHeaderRow(); // get the header row

        highLightColumn(row, colIndex); //change the colour of the cell
                                        //with the same index in the header

        row = getCurrentRow(col.RowIndex); //now get the current row

        highlightColumn(row, 0); //change the colour of the cell
                                 //with the index of 0
    }

    getHeaderRow()
    {
         return getRow(0);
    }

    getRow(rowIndex)
    {
        var table = document.getElementByID("tbl);
        return table.rows[rowIndex];
    }

    highlightColumn(row, colIndex)
    {
         row[colIndex].style.backgroundcolor = "red";
    }

$("td").on({
    "mouseenter":function(){
        $(this).closest("tr").find("td:first-child").css("background","#f99");
        var col = $(this).index();
        $(this).closest("table").find("tr:first-child").find(String("td:nth-child(" + (col + 1) + ")")).css("background","#f99");
        $(this).css("background","#f00");
    },
    "mouseleave":function(){        
        $(this).closest("table").find("td,tr").css("background","none");        
    }
});

$("td").on({
    "mouseenter": function () {
        $(this).closest("tr").css("background", "#f99");
        var col = $(this).index();
        var myTable = $(this).closest("table");
        var rows = $(myTable).find("tr");
        $(rows).each(function (ind, elem) {
            var sel = String("td:nth-child(" + (col + 1) + ")");
            $(this).find(sel).css("background", "#f99");
        });
        $(this).css("background", "#f00");
    },
        "mouseleave": function () {
        $(this).closest("table").find("td,tr").css("background", "none");
    }
});

With code