Добавьте эффект наведения jQuery на две таблицы - PullRequest
Новая
       17

Добавьте эффект наведения jQuery на две таблицы

2 голосов
/ 26 октября 2011

У меня есть две таблицы HTML в div с плавающей рядом друг с другом. Второй div прокручивается в горизонтальном направлении, поэтому фактически он выглядит как одна большая таблица, где первые несколько столбцов «заморожены», а остальные можно прокручивать.

Следующий jQuery прекрасно работает для выделения строки в одной таблице, когда пользователь наводит на нее курсор: 

$("table.grid tr:not(:first-child)")
  .hover(
    function () { $(this).addClass("highlight"); },
    function () { $(this).removeClass("highlight"); }
  );

Обратите внимание, что :not(:first-child) предотвращает выделение заголовка.

Как я могу изменить это так, чтобы он также выделил соответствующую строку в другой таблице (которая также имеет класс grid)?

Другими словами, если я наведу указатель мыши на n -ую строку в любой таблице, то n -я строки в обеих таблицах будут подсвечены.

РЕДАКТИРОВАТЬ : HTML выглядит так: 

<div>
  <div style="float: left">
    <table id="names" class="grid">
      <tr><th>Last</th><th>First</th></tr>
      <tr><td>Smith</td><td>John</td></tr>
      <!-- etc -->
      </table>
  </div>
  <div style="float: left; overflow-x: scroll">
    <table id="results" class="grid">
      <tr><th>Test 1</th><th>Test 2</th></tr>
      <tr><td>50%</td><td>70%</td></tr>
      <!-- etc -->
    </table>
  </div>
  <div style="clear: both">
  </div>
</div>

Ответы [ 2 ]

8 голосов
/ 26 октября 2011

Хитрость заключается в том, чтобы захватить все <tr> в начале и затем объединить $(this).index(), filter и :nth-child, чтобы выбрать правильные строки в обе таблицы одновременно: 

var $trs = $('table.grid tr:not(:first-child)');
$trs.hover(
    function() {
        var i = $(this).index() + 1;
        $trs.filter(':nth-child(' + i + ')').addClass('highlight');
    },
    function() {
        var i = $(this).index() + 1;
        $trs.filter(':nth-child(' + i + ')').removeClass('highlight');
    }
);

Демо: http://jsfiddle.net/ambiguous/54thG/

Вызов index дает вам положение <tr> относительно его братьев и сестер в $trs, затем вы настраиваетесь на 1, потому что index начинается с нуля, но :nth-child (это CSS selector) основывается на одном и одновременно управляет классом в обеих строках.

2 голосов
/ 26 октября 2011

Вот что я понял:

HTML: 

<html>
    <style>
    .highlight {background:gray;}
    </style>
    <body>
        <div>
            <div style="float: left">
                <table id="names" class="grid" style="width:200px">
                    <tr class="row0"><th style="width:40%">Last</th><th>First</th></tr>
                    <tr class="row1"><td>Smith</td><td>John</td></tr>
                    <tr class="row2"><td>Smith</td><td>John</td></tr>
                    <tr class="row3"><td>Smith</td><td>John</td></tr>
                    <tr class="row4"><td>Smith</td><td>John</td></tr>
                    <!-- etc -->
                </table>
            </div>
            <div style="float: left; overflow-x: scroll">
                <table id="results" class="grid" style="width:200px">
                    <tr class="row0"><th>Test 1</th><th>Test 2</th></tr>
                    <tr class="row1"><td>50%</td><td>70%</td></tr>
                    <tr class="row2"><td>50%</td><td>70%</td></tr>
                    <tr class="row3"><td>50%</td><td>70%</td></tr>
                    <!-- etc -->
                </table>
            </div>
            <div style="clear: both"></div>
        </div>
    </body>
</html>

JS: 

$(document).ready(function() {
    $("table#names tr:not(:first-child)").each(function(k, v){
        var self = this;
        // index: 0 = second row; 1= 3rd row... of table#names 
        // index+1 for other table's row: .find('tr.row'+(index+1))
        (function(index){ 
            $(self).hover(
                function() {
                    $(this).addClass("highlight");                

                    // go up to parent div of #names, then its siblings, then the siblings' table's row
                    // you could also just $('table#results')
                    $('table#names').parent().siblings().find('tr.row'+(index+1)).addClass("highlight");
                }, function() {
  $('table#names').parent().siblings().find('tr.row'+(index+1)).removeClass("highlight");
                    $(this).removeClass("highlight");
                }
            );
        })(k); // pass index so function above remembers it
    });
});

JSFiddle: http://jsfiddle.net/6aNy2/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...