Two different html tables highlight the same rows order

I have a question, I am trying to make some manipulation with html tables. I have two tables, and when I hover first row from the first table, it should highlight both rows from both tables.

我有一个问题,我试图用html表进行一些操作。我有两个表,当我从第一个表中悬停第一行时,它应该突出显示两个表中的两行。

I have found a solution, in making this simple function:

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

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

On the first table I have:

在第一张桌子上我有:

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

on the second table I have:

在第二张桌子上我有:

<tr id="row1" >

So when I put mouseover the first row from the first table, the first row from the second table highlights.

因此,当我将鼠标移到第一个表的第一行时,第二个表中的第一行突出显示。

My question is, how to make it for the every single row, especially if it will be dynamic table. Hope I was clear.

我的问题是,如何为每一行创建它,特别是如果它将是动态表。希望我很清楚。

3 个解决方案

#1

I've implemented this with jQuery. It doesn't use obtrusive JS and doesn't require additional IDs for rows. Also, CSS classes are more preferable than inline styles.

我用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');
        }
    );
});

Here is live fiddle: http://jsfiddle.net/keaukraine/KBEhA/1/

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

#2

You can use the div id as a parameter in the function

您可以使用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';
 }

#3

You can use jQuery for this.

你可以使用jQuery。

Use the .eq() and .index() functions.

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

A way of doing it:

一种方法:

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');
    });
});

A working example can be found here.

可以在这里找到一个工作示例。