同时突出显示两个表

Question

我的网页上有两张桌子。第一个是学生的学生，第二个是老师的学习。在我的css文件中，我有这些代码：

table {
     overflow: hidden;
}
 body:not(.nohover) tbody tr:hover {
     background-color: #ffa;
}
 td:hover::after, thead th:not(:empty):hover::after, td:focus::after, thead th:not(:empty):focus::after {
     content: '';
     height: 10000px;
     left: 0;
     position: absolute;
     top: -5000px;
     width: 100%;
     z-index: -1;
}
 td:hover::after, th:hover::after {
     background-color: #ffa;
}
 td:focus::after, th:focus::after {
     background-color: lightblue;
}

这些css代码突出显示表的行和列。正如我之前说的那样，我有两张桌子并同时悬停两张桌子。我的意思是例如当鼠标在行上时：1 col：第一个表中的3个，我想要同时突出第一个表和第二个表的行：1和col：3。

Answer 1

使用.index()和.eq()，您可以确定哪一行悬停并突出显示另一个表中的相应行。

你不能＆＃34;链接＆＃34;像仅使用CSS的不同元素。所以这是一个简短的例子。

＆＃13;

＆＃13;

Private Sub UpdateGUI()
    Dim lines As String() = TextBox1.Text.Split(New String() {Environment.NewLine}, StringSplitOptions.RemoveEmptyEntries)

    For Each itm In lines
        MsgBox(itm.Substring(itm.IndexOf(":") + 1, itm.Length - itm.IndexOf(":") - 1))
    Next
End Sub

＆＃13;

var hoveredRow;
var otherTableRows;

$(document).ready(function(){
  $(".student tbody tr, .teacher tbody tr").hover(
    function(){
      
      // Determine which table is "the other"
      if( $(this).closest(".student").length>0 ){
        otherTableRows = $(".teacher tbody tr");
      }else{
        otherTableRows = $(".student tbody tr");
      }
      
      // Get the hovered row index
      hoveredRow = $(this).index();
      
      // Highlight on moueenter
      $(this).css({"background-color": "#ffa"});
      otherTableRows.eq(hoveredRow).css({"background-color": "#ffa"});
    },
    function(){
      // Unhighlight on mouseout
      $(this).css({"background-color": "initial"});
      otherTableRows.eq(hoveredRow).css({"background-color": "initial"});
    }
  );
});

＆＃13;

table {
  overflow: hidden;
  float:left;
  margin:0 3em;
}
td{
  border:1px solid black;
}

＆＃13;

＆＃13;

＆＃13;

突出显示悬停的行和列

＆＃13;

＆＃13;

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


<table class="student">
  <thead>
    <tr>
      <th>col 1
      </th>
      <th>col 2
      </th>
      <th>col 3
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>data 1
      </td>
      <td>data 2
      </td>
      <td>data 3
      </td>
    </tr>
    <tr>
      <td>data 1
      </td>
      <td>data 2
      </td>
      <td>data 3
      </td>
    </tr>
    <tr>
      <td>data 1
      </td>
      <td>data 2
      </td>
      <td>data 3
      </td>
    </tr>
  </tbody>
</table>

<table class="teacher">
  <thead>
    <tr>
      <th>col 1
      </th>
      <th>col 2
      </th>
      <th>col 3
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>data 1
      </td>
      <td>data 2
      </td>
      <td>data 3
      </td>
    </tr>
    <tr>
      <td>data 1
      </td>
      <td>data 2
      </td>
      <td>data 3
      </td>
    </tr>
    <tr>
      <td>data 1
      </td>
      <td>data 2
      </td>
      <td>data 3
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

var hoveredRow;
var hoveredRowIndex;
var hoveredCellIndex;
var otherTableRows;

$(document).ready(function(){
  $(".student tbody td, .teacher tbody td").hover(
    function(){
      
      // Determine which table is "the other"
      if( $(this).closest(".student").length>0 ){
        otherTableRows = $(".teacher tbody tr");
      }else{
        otherTableRows = $(".student tbody tr");
      }
      
      // Get the hovered row index
      hoveredRow = $(this).parent("tr");
      hoveredRowIndex = hoveredRow.index();
      
      // Get the hovered cell index
      hoveredCellIndex = $(this).index();
                     
      
      // Highlight on moueenter
      hoveredRow.css({"background-color": "#ffa"});
      hoveredRow.closest("table").find("tr").each(function(){
        $(this).find("td").eq(hoveredCellIndex).css({"background-color": "#ffa"});
      });
      
      otherTableRows.eq(hoveredRowIndex).css({"background-color": "#ffa"});
      otherTableRows.each(function(){
        $(this).find("td").eq(hoveredCellIndex).css({"background-color": "#ffa"});
      })
    },
    function(){
      // Unhighlight on mouseout
      hoveredRow.css({"background-color": "initial"});
      hoveredRow.closest("table").find("tr").each(function(){
        $(this).find("td").eq(hoveredCellIndex).css({"background-color": "initial"});
      });
      
      otherTableRows.eq(hoveredRowIndex).css({"background-color": "initial"});
      otherTableRows.each(function(){
        $(this).find("td").eq(hoveredCellIndex).css({"background-color": "initial"});
      })
    }
  );
});

＆＃13;

table {
  overflow: hidden;
  float:left;
  margin:0 3em;
}
td{
  border:1px solid black;
}

＆＃13;

＆＃13;

＆＃13;