0

次の2つのテーブルがあります。jqueryを使用して、それぞれのコルグループをマウスオーバーでハイライトしたいと思います。

<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>

Jクエリは次のとおりです。

$("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番目のテーブルの最初の列に移動すると、最初のテーブルの最初の列が強調表示されます。表 2 の列 1 から 4 はすべて、表 1 の列 1 から 4 を強調表示しています。そして、6 番目の列は 2 番目の列を強調表示します。

なぜすべてがそのようにずれているのですか？

4

1 に答える 1

2

以下のコードで問題が解決すると思いますが、長い一日なので、完璧ではないかもしれません:)主なことは、マウスオーバーされている現在のテーブルだけに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");
          }
      });
于 2012-07-12T00:12:38.590 に答える