jquery - jQuery 选择了错误的表的 colgroup

Question

我有以下两张表。我希望使用 jquery 将每个 colgroups 用鼠标悬停来突出显示。

<div id="one">
    <table border=1>
        <colgroup><colgroup><colgroup><colgroup>
            <thead>
                <tr>
                        <th>A</th>
                        <th>B</td>
                        <th>C</th>
                        <th>D</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                </tr>
            </tbody>
    </table>
</div>
<div id="two">
    <table border=1>
        <colgroup><colgroup><colgroup><colgroup><colgroup><colgroup>                        
            <thead>
                <tr>
                         <th>A</th>
                         <th>B</th>
                         <th>C</th>
                         <th>D</th>
                         <th>E</th>
                         <th>F</th>
                </tr>
            </thead>
                <tbdoy>
                <tr>
                         <td>1</td>
                         <td>2</td>
                         <td>3</td>
                         <td>4</td>
                         <td>5</td>
                         <td>6</td>
                </tr>
           </tbody>
       </table>
</div>

这是jQuery：

$("table").delegate('td, th','mouseover mouseleave', function(e) {
              if (e.type == 'mouseover') {
                $("colgroup").eq($(this).index()).addClass("hover");
              }
              else {
                $("colgroup").eq($(this).index()).removeClass("hover");
              }
          });    

jquery 适用于第一个表，但是当我转到第二个表的第一个列时，第一个表中的第一个列突出显示。表 2 的第 1-4 列都突出显示了表 1 的第 1-4 列。当我在第二个表中执行第五列时，第二个表中的第一列突出显示。第六列使第二列突出显示。

为什么一切都是这样抵消的？

Answer 1

我认为下面的代码将解决您的问题，但这是漫长的一天，所以它可能并不完美 :) 主要是您需要将您的 colgroup 集合减少到仅将鼠标悬停在当前表上。

$("table").delegate('td, th','mouseover mouseleave', function(e) {
          var $table = $(this).closest("table");
          if (e.type == 'mouseover') {
            $table.children("colgroup").eq($(this).index()).addClass("hover");
          }
          else {
            $table.children("colgroup").eq($(this).index()).removeClass("hover");
          }
      });