如何將懸停在兩個不同表上的同一行上？

我在我的html中有兩個不同的表，並假設它們都具有相同的數據集合 - 意味着這些行代表集合中的同一個對象。我想應用以下功能：當我將鼠標懸停在表1中的N行上時，它突出顯示了表1中的N行和表2中的同一行。我能夠完成它，但是我必須操作我的收藏集 - 我在對象上添加了.hover屬性，並將其作爲鼠標輸入和鼠標離開的標誌，並根據特定的樣式添加。不過，我知道這不應該這樣做 - 因爲它打破了雙向數據綁定規則。如何將懸停在兩個不同表上的同一行上？

有關如何在不操縱數據的情況下實現這一點的任何想法？

來源

2016-02-10 uksz

可惜，這是不可能的CSS單獨 – Aaron

您可以通過使用小的jQuery實現這一目標：

var tr_class; 
$('.table1 tr').hover(
    function(){ 
    tr_class = $('this').attr('class'); 
    $('this').addClass('highlightBg'); 
    $('.table2 ' + tr_class).addClass('highlightBg'); 
}, 
    function(){ 
    $(this).removeClass('highlightBg'); 
    $('table2 ' + tr_class).removeClass('highlightBg'); 
}); 
$('.table2 tr').hover(
    function(){ 
    tr_class = $('this').attr('class'); 
    $('this').addClass('highlightBg'); 
    $('.table1 ' + tr_class).addClass('highlightBg'); 
}, 
    function(){ 
    $(this).removeClass('highlightBg'); 
    $('table1 ' + tr_class).removeClass('highlightBg'); 
});

的兩個表格行需要有一個像例如一個行號的一類對其計數：

<tr class='1'>...</tr> 
<tr class='2'>...</tr>

.highlightBg定義background-color爲突出顯示的狀態，在本例中.table1和.table2是表的類。

認爲應該做的工作。

來源

2016-02-10 09:54:11 habamedia

謝謝，我會給它一個鏡頭！ – uksz

這是你想要的。但我用這個位置jquery this.hope這將幫助你。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
<style type="text/css"> 
 

 
div.tableone{ 
 
    margin:50px; 
 
} 
 
div.tabletwo{ 
 
    margin: 50px; 
 
} 
 

 
table{ 
 
    border:1px solid black; 
 
} 
 

 
    table tr th{ 
 
    width: 200px; 
 
    } 
 

 
    table tr td{ 
 
    text-align: center; 
 
    } 
 

 
.classOne{ 
 
    background-color: orange; 
 
    color: white; 
 
} 
 

 

 
</style> 
 

 
    
 

 

 

 

 
<body> 
 
    
 
<h1>table one</h1> 
 
    <div class="tableone"> 
 
    <table border="2"> 
 
     <thead> 
 
     <tr class="trone"> 
 
      <th>one</th> 
 
      <th>Two</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>dataone</td> 
 
      <td>datetwo</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 

 
<h1>table two</h1> 
 
    <div class="tabletwo"> 
 
    <table border="2"> 
 
     <thead> 
 
     <tr class="trtwo"> 
 
      <th>Three</th> 
 
      <th>Four</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>datatwo</td> 
 
      <td>datethree</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    
 
    <script type="text/javascript"> 
 
    $(document).ready(function(){ 
 
     $(".trone").mouseenter(function(){ 
 
     $(this).addClass("classOne"); 
 
     $(".trtwo").addClass("classOne"); 
 
     }); 
 
     $(".trone").mouseleave(function(){ 
 
     $(this).removeClass("classOne"); 
 
     $(".trtwo").removeClass("classOne"); 
 
     }); 
 

 

 
     $(".trtwo").mouseenter(function(){ 
 
     $(this).addClass("classOne"); 
 
     $(".trone").addClass("classOne"); 
 
     }); 
 

 
     $(".trtwo").mouseleave(function(){ 
 
     $(this).removeClass("classOne"); 
 
     $(".trone").removeClass("classOne"); 
 
     }); 
 

 

 
     
 
    }); 
 
    </script> 
 

 
</body> 
 
</html>

來源

2016-02-10 09:55:29

如何將懸停在兩個不同表上的同一行上？

回答

相關問題