Jquery перейдите к родителю <tr>. Проблемы с использованием селекторов parent () или closest () - PullRequest
1 голос
/ 16 ноября 2011

Я не могу достичь чего-то, что кажется таким простым.Не уверен, где я иду не так.Пожалуйста, порекомендуйте.Цель состоит в том, чтобы выделить строку таблицы, если установлен соответствующий флажок.Я сослался на несколько примеров, в которых говорится об использовании .closest ('tr') или .parent ('tr'), чтобы заставить это работать, но по некоторым причинам в моем случае - его перевыполнение, т.е. он выделяет все строки, а не толькотот, который выбран.

Мой HTML

<tr class="EvenRowClass">
 <td class="ColClass">
   <div class="wrapClass" ">
 <span class="tableCol" style="background: someimage.png") </span>
 <span class="tableCol" style="background: someimage.png") </span>
 <input id="Check1" class="selectCheck" type="checkbox"
      onclick="highlightRow(this,Check1); return false;" value="Check1">
</div>
 </td>
 <td>SomeCode</td>
 <td>SomeCode</td>
 <td>SomeCode</td>

Предположим, что есть еще один блок такого кода с уникальными идентификаторами для каждого последовательного флажка)

МойФункция JavaScript, которая вызывается при щелчке

    function highlightRow(checkbox, id)
{
   $("tr:parent").toggleClass("highlight", checkbox.checked);   
}   

Приведенный выше javascript выбирает все элементы в таблице и на остальной части страницы независимо от того, отмечены они или нет, и применяет к ним класс выделения.Я попробовал несколько других версий, используя переключатель выбора, .closest ('tr'), .parent ('tr'), но ни одна из них не работала для меня.

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

Пожалуйста, сообщите.Я почесал голову над этим настолько, что теперь стало больно.

Ответы [ 2 ]

1 голос
/ 16 ноября 2011
function highlightRow( checkbox, id ) {
    $( checkbox ).closest( 'tr' ).toggleClass( 'highlight', checkbox.checked );  
};
0 голосов
/ 16 ноября 2011

Попробуйте это:

   function highlightRow(checkbox, id)
{
   $(checkbox).parents("tr").toggleClass("highlight", checkbox.checked);   
}   
...