Question

我有两张桌子，当我将鼠标悬停在表格2中的另一个单元格上时，我想突出显示表格1中的单元格。不知道如何从这里到达那里。我想我应该从表2中获取id并在表1中查找相同的id并添加高亮类。

<!DOCTYPE html> 
<html> 
<head> 
  <style> 
.cell {    background-color:#FFCC00 } 
.cell-highlight {    background-color:green } 
</style> 
  <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

<table border='1' id='table-1'>
    <tr>
        <td class='cell' id='cell-0-0'>Cell 0,0</td><td class='cell' id='cell-0-1'>Cell 0,1</td>
    </tr>
    <tr>
        <td class='cell' id='cell-1-0'>Cell 1,0</td><td class='cell' id='cell-1-1'>Cell 1,1</td>
    </tr>
</table>
<br/>
<table border='1' id='table-2'>
    <tr>
        <td class='cell' id='t2cell-0-0'>2 Cell 0,0</td><td class='cell' id='t2cell-0-1'>2 Cell 0,1</td>
    </tr>
    <tr>
        <td class='cell' id='t2cell-1-0'>2 Cell 1,0</td><td class='cell' id='t2cell-1-1'>2 Cell 1,1</td>
    </tr>
</table>
<script> 
  var id;
  $("td.cell").mouseover(function() { 
    id=$(this).find("id");
    $(this).addClass('cell-highlight' ); 
  }).mouseout(function() { 
    $(this).removeClass('cell-highlight' ); 
  }); 

</script> 

</body>

Answer 1

对您的代码进行以下更改

$("td.cell").mouseover(function() { 
    id=$(this).attr("id");
    $(this).addClass('cell-highlight' ); 
    secondid = "#t2"+id;
    $(secondid).addClass('cell-highlight');
  }).mouseout(function() { 
    $(this).removeClass('cell-highlight' );
    id=$(this).attr("id");
    secondid = "#t2"+id;
    $(secondid).removeClass('cell-highlight'); 
});

Answer 2

您可以使用jQuery的索引和eq函数来标识突出显示的单元格的表-1中的位置。然后在表2中镜像这个选择。

http://jsfiddle.net/SfGZV/2

$('#table-1 td').mouseover( function() {
    var row = $(this).parent('tr').index();
    var cell = $(this).index();

    $('#table-2 td.active').removeClass('active');        
    $('#table-2 tr').eq(row).children('td').eq(cell).addClass('active');
});

jQuery如何根据另一个的id更改一个类

2 个答案: