兩個不同的html表格突出顯示相同的行順序

我有一個問題，我想用html表進行一些操作。我有兩個表，，當我懸停第一行從表中，它應該突出兩個表中的行。兩個不同的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()" >

在第二表I具有：

<tr id="row1" >

所以，當我把鼠標懸停在第一張表的第一行上時，第二張表中的第一行突出顯示。

我的問題是，如何使它爲每一行，特別是如果它將動態表。希望我很清楚）

來源

2013-06-25 user2265174

我已經實現了這與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-25 08:26:06 keaukraine

感謝您的好建議！ – user2265174

您可以使用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-25 08:12:59

感謝那些運作良好。但是，你是否有一些線索，如何做到這一點，如果錶行將動態添加？無論如何感謝這個提示！ – user2265174

您可以使用循環功能更改每行的div id –

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

工作示例可以發現here。

來源

2013-06-25 08:24:26 MisterBla

謝謝你的好例子！ – user2265174

不客氣。 :) – MisterBla

兩個不同的html表格突出顯示相同的行順序

回答

相關問題