0

divに2つのテーブルがあり、両方のテーブルの同じ行を同時に強調表示したいと思います。今のところ、1つのテーブルの列と行を強調表示することしかできませんでした。

（例：の「Row2Column3」にカーソルを合わせると、のRow2が強調表示されtbl-2、その逆になります）tbl-1

thまた、タグを強調表示するにはどうすればよいですか？

<div class="row">
<div class="span2 pull-left">
    <table class="table table-bordered pull-left" id="compare-tbl-1">
        <thead>
            <th>Column 1</th>
        </thead>
        <tbody>
            <tr>
                <td>
                    Row1
                </td>
            </tr>
            <tr>
                <td>
                    Row2
                </td>
            </tr>
            <tr>
                <td>
                    Row3
                </td>
            </tr>
            <tr>
                <td>
                    Row4
                </td>
            </tr>
            <tr>
                <td>
                    Row5
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="span10 pull-right">
    <table class="table table-bordered" id="compare-tbl-2">
        <thead>
            <th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th>
        </thead>
        <tbody>
            <tr>
                <td>Row1 Column1</td><td>Row1 Column2</td><td>Row1 Column3</td><td>Row1 Column4</td><td>Row1 Column5</td>
            </tr>
            <tr>
                <td>Row2 Column1</td><td>Row2 Column2</td><td>Row2 Column3</td>    <td>Row2 Column4</td><td>Row2 Column5</td>
            </tr>
            <tr>
                <td>Row3 Column1</td><td>Row3 Column2</td><td>Row3 Column3</td><td>Row3 Column4</td><td>Row3 Column5</td>
            </tr>
            <tr>
                <td>Row4 Column1</td><td>Row4 Column2</td><td>Row4 Column3</td><td>Row4 Column4</td><td>Row4 Column5</td>
            </tr>
            <tr>
                <td>Row5 Column1</td><td>Row5 Column2</td><td>Row5 Column3</td><td>Row5 Column4</td><td>Row5 Column5</td>
            </tr>
        </tbody>
    </table>
</div>


<script>
    $("#compare-tbl-2 td").hover(function() {
            $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')').
                  add($(this).parent()).addClass('compare-hover');
      },
      function() {
            $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')').
                  add($(this).parent()).removeClass('compare-hover');
      });
</script>
4

1 に答える 1

0

スクリプトを次のように置き換えてみてください。

$("#compare-tbl-2 td").hover(function() {
$(this).closest('tr').addClass('compare-hover');
var idx = $(this).closest('tr')[0].sectionRowIndex + 1;

$('#compare-tbl-1').find('tr:nth-child(' + idx + ')').addClass('compare-hover');
  },
  function() {
      $(this).closest('tr').removeClass('compare-hover');
      $('#compare-tbl-1').find('tr').removeClass('compare-hover');
  });

jsFiddle

于 2013-02-04T17:08:23.053 に答える