【问题标题】：Jquery navigate to parent <tr>. Issues with using parent() or closest() selectorsJquery 导航到父 <tr>。使用 parent() 或最接近() 选择器的问题
【发布时间】：2011-12-30 01:35:21
【问题描述】：

我无法实现看似如此简单的事情。不知道我哪里出错了。请指教。目标是突出显示一个表格行，它对应的复选框被选中。我提到了几个关于使用 .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>

假设有另一个这样的代码块，每个复选框顺序都有一个唯一的ID）

点击时调用我的 JavaScript 函数

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

上面的 javascript 选择表中的所有内容和页面的其余部分，无论它们是否被选中，并将突出显示类应用于它。我使用复选框选择器、.closest('tr')、.parent('tr') 尝试了其他几个版本，但没有一个对我有用。

最后提到的几个更好，因为它们只影响表格内的内容，而不影响页面上的其他内容。

请指教。我已经为此挠头了，现在它开始疼了。

【问题讨论】：

标签： jquery html-table traversal tablerow

【解决方案1】：

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

【讨论】：

金色。非常感谢。这行得通。但我有一个问题？如果我只是将 ID 用作选择器，为什么同样的事情不起作用.. 'function highlightRow(checkbox, id) { var id = id; $(#id).parents("tr").toggleClass("highlight", checkbox.checked); }'
你必须这样做：$( '#' + id ).。您也不能传入复选框或 id 并执行 $( this ).

【解决方案2】：

试试这个：

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

【讨论】：

金色。但我有一个问题？如果我只是将 ID 用作选择器，为什么同样的事情不会起作用.. function highlightRow(checkbox, id) { var id = id; $(#id).parents("tr").toggleClass("highlight", checkbox.checked); }