1

我有一个问题，我正在尝试对 html 表格进行一些操作。我有两个表，当我悬停第一个表的第一行时，它应该突出显示两个表中的两行。

我找到了一个解决方案，使这个简单的功能：

<script type="text/javascript">
function matchrow(){
document.getElementById('row1').style.backgroundColor='#f5f5f5'; 
}
function unmatchrow(){
document.getElementById('row1').style.backgroundColor='white';
}        
</script>

在第一张桌子上，我有：

<tr onmouseover="matchrow()" onmouseout="dismatchrow()" >

在第二张桌子上我有：

<tr id="row1" >

因此，当我将鼠标悬停在第一个表的第一行时，第二个表的第一行会突出显示。

我的问题是，如何为每一行制作它，特别是如果它是动态表。希望我很清楚。

4

3 回答 3

2

我已经用 jQuery 实现了这个。它不使用突兀的 JS，也不需要额外的行 ID。此外，CSS 类比内联样式更受欢迎。

HTML：

<table id="t1">
    <tr><td>......</td></tr>
    <tr><td>......</td></tr>
</table>
<br/>
<table id="t2">
    <tr><td>......</td></tr>
    <tr><td>......</td></tr>
</table>

CSS：

tr.active > td
{
    background-color:#f00;
}

JS：

$(function(){
    $("#t1 tr").hover(
        function(){
            $(this).addClass('active');
            $('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').addClass('active');
        },
        function(){
            $(this).removeClass('active');
            $('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').removeClass('active');
        }
    );
});

这是现场小提琴：http: //jsfiddle.net/keaukraine/KBEhA/1/

于 2013-06-25T08:26:06.930 回答
1

您可以使用 div id 作为函数中的参数

 <tr onmouseover="matchrow('row1')" onmouseout="dismatchrow('row1')">

 function matchrow(divid){
      document.getElementById(divid).style.backgroundcolor='#F5F5F5';
 }
 function dismatchrow(divid){
      document.getElementById(divid).style.backgroundcolor='white';
 }
于 2013-06-25T08:12:59.323 回答
0

您可以为此使用 jQuery。

使用.eq()和.index()函数。

一种方法：

HTML：

<table border="1">
    <tr>
        <td>Row1</td>
    </tr>
    <tr>
        <td>Row2</td>
    </tr>
    <tr>
        <td>Row3</td>
    </tr>
    <tr>
        <td>Row4</td>
    </tr>
</table>

<table border="1">
    <tr>
        <td>Row1</td>
    </tr>
    <tr>
        <td>Row2</td>
    </tr>
    <tr>
        <td>Row3</td>
    </tr>    
</table>

JS：

$('table tr').hover(function()
{
    var index = $(this).index();
    $('table').each(function()
    {
        $(this).find('tr').eq(index).css('color', 'red');
    });
});

可以在此处找到一个工作示例。

于 2013-06-25T08:24:26.270 回答