JQuery在点击时切换行

我试图在点击具有特定ID的行时隐藏/显示行的子集。JQuery在点击时切换行

通过大量的搜索网络和大量的尝试，我得到了下面的代码。

唯一的问题是这个代码由于某种原因只隐藏/显示第一组行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 

<head> 
      <title>Test</title> 

      <script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script> 

      <script type="text/javascript"> 

      $(document).ready(function() 
      { 
       $('#rowToClick').click(function() 
       { 
        $(this).nextAll('tr').each(function() 
        { 
         if ($(this).is('#rowToClick')) 
         { 
          return false; 
         } 
         $(this).toggle(); 
        }); 
       }); 
      }); 
      </script> 
     </head>   

<body> 
<table> 
    <tr id="rowToClick"><td>ClickMe</td></tr> 
    <tr id="Tr1"><td>Toggled</td></tr> 
    <tr id="Tr2"><td>Toggled</td></tr> 
    <tr id="Tr3"><td>Toggled</td></tr> 
    <tr id="Tr4"><td>Toggled</td></tr> 
    <tr id="Tr5"><td>Toggled</td></tr> 
    <tr id="rowToClick"><td>ClickMe</td></tr> 
    <tr id="Tr6"><td>Toggled</td></tr> 
    <tr id="Tr7"><td>Toggled</td></tr> 
    <tr id="Tr8"><td>Toggled</td></tr> 
    <tr id="Tr9"><td>Toggled</td></tr> 
    <tr id="Tr10"><td>Toggled</td></tr> 
</table> 
</body> 

</html>

任何人都有一个建议和/或可能重写的代码？

----------更新 - 最终的解决方案-----------

我结束了下面基于布兰登的输入解决方案，因为我想用相同的行为进行更多的嵌套，就像可折叠树视图一样。不幸的是，这意味着我不得不添加一个额外的属性来跟踪状态，但我现在可以忍受，直到我找到另一种方式（例如检查下一行的可见性）。

  $(document).ready(function() { 
      toggleRows('.module','.namespace'); 
      toggleRows('.namespace','.type'); 
      toggleRows('.type','.member'); 
     }); 

     function toggleRows(parentClass,subClass) 
     { 
      $(parentClass).click(function() { 

       if($(this).attr("value")=="collapsed")     
       { 
        $(this).attr("value","expanded"); 
        $(this).nextUntil(parentClass).filter(subClass).toggle(true); 
       } 
       else 
       { 
        $(this).attr("value","collapsed"); 
        $(this).nextUntil(parentClass).attr("value","collapsed"); 
        $(this).nextUntil(parentClass).toggle(false); 
       }  

      }); 
     }

来源

2011-03-29 Christian Mikkelsen

你有没有想过使用诸如tablesorter的插件？ http://blog.pengoworks.com/index。cfm/2008/3/28/Finished-jQuery-Tablesorter-mod-for-Collapsible-Table-Row – iivel 2011-03-29 16:43:15

使用.data（）而不是.attr（）。它更符合：$（this）.data（“value”）和$（this）.data（“value”，“expanded”）'。此外，链接您的调用，以避免扫描DOM 2x：'$（this）.nextUntil（parentClass）.data（“value”，“collapsed”）。toggle（false）;' – Brandon 2011-03-30 16:23:13

首先，您不能有多个具有相同ID的行。而不是设置ID为 “rowToClick” 的，设置CSS类：

<tr class='rowToClick'><td>click me</td></tr>

下，这应该工作：

$(document).ready(function() 
     { 
      $(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); }); 
     });

来源

2011-03-29 16:42:40 Brandon

这是因为id属性只能针对文档中的每个id使用一次。你应该使用class属性，然后在你的jQuery代码中，使用$（“。rowToClick”）选择器访问类rowToClick的项目。

希望这会有所帮助。

Andy

来源

2011-03-29 16:41:11 Andbdrew

看看at this fiddle
使用:not()选择，你可以选择所有没有你想要过滤的id/class的tr元素：

$('.rowToClick').click(function() 
{ 
    $('tr:not(.rowToClick)').toggle(); 
    //toggle all rows on the page that 
    //do not have the class rowToClick 
});

请注意，您不能有两个具有相同ID的元素 - 您有两行ID为rowToClick。改为使用class。

来源

2011-03-29 16:43:23

我想你的代码切换到这样的事情：

<tr class="rowToClick" rel="1"><td>ClickMe</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="rowToClick" rel="2"><td>ClickMe</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr>

然后，像这样：

$('.rowToClick').click(function() 
{ 
    var rel = $(this).attr('rel'); 

    $('.row' + rel + 'Collapse').show(); // or hide, you get the idea 
});

来源

2011-03-29 16:43:23 Tejs

我相信这是所需的行为：

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 

    <script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

      // Also, just as an extra, use "context" to limit the scope of any jQuery selector-search. 
      // That way on large pages your selector doesn't search through the whole page, 
      // it only searches the tables HTML. 
      // Doing so is a short-cut for: $('#tblMyTable').find('tr.clickTrigger'); 
      var context = $('#tblMyTable'); 

      $('tr.clickTrigger', context).click(function() { 

       $(this).nextAll('tr').each(function() { 

        if ($(this).is('tr.clickTrigger')) 
         return false; 

        $(this).toggle(); 
       }); 
      }); 
     }); 
    </script> 


</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <table id="tblMyTable" cellpadding="0" cellspacing="0"> 
      <tr class="clickTrigger"> 
       <td>ClickMe</td> 
      </tr> 
      <tr id="Tr1"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr2"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr3"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr4"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr5"> 
       <td>Toggled</td> 
      </tr> 
      <tr class="clickTrigger"> 
       <td>ClickMe</td> 
      </tr> 
      <tr id="Tr6"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr7"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr8"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr9"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr10"> 
       <td>Toggled</td> 
      </tr> 
     </table> 
    </div> 
    </form> 
</body> 
</html>

来源

2011-03-29 17:04:24

<script> 
    function padre(id){ 
         var pa=$('.rowToClick_'+id); 
         $(pa).nextAll('tr').each(function(){ 
          if ($(this).is('.rowToClickEnd_'+id)) 
          { 
           $(this).toggle(); 
           return false; 
          } 
          $(this).toggle(); 
         }); 
        } 
       </script> 

    <table> 
     <tr class="rowToClick_1"><td><a href="javascript:padre('1')">+</a>Categoria 1</td></tr> 
     <tr id="Tr1" class="rowToClick_1_1"><td><a href="javascript:padre('1_1')">+</a>Categoria 1_1</td></tr> 
     <tr id="Tr1_1"><td>Categoria 1_1_1</td></tr> 
     <tr id="Tr1_2" class="rowToClickEnd_1_1"><td>Categoria 1_1_2</td></tr> 
     <tr id="Tr2"><td>Categoria 1_2</td></tr> 
     <tr id="Tr3"><td>Categoria 1_3</td></tr> 
     <tr id="Tr4"><td>Categoria 1_4</td></tr> 
     <tr id="Tr5" class="rowToClickEnd_1"><td>Toggled</td></tr> 
     <tr class="rowToClick"><td>ClickMe</td></tr> 
     <tr id="Tr6"><td>Toggled</td></tr> 
     <tr id="Tr7"><td>Toggled</td></tr> 
     <tr id="Tr8"><td>Toggled</td></tr> 
     <tr id="Tr9"><td>Toggled</td></tr> 
     <tr id="Tr10" class="rowToClickEnd"><td>Toggled</td></tr> 
    </table>

来源

2012-06-28 20:09:06

它适用于不同级别 – 2012-06-28 20:12:06

添加一些信息关于你的答案如何工作。它会帮助别人。 – 2012-10-20 02:44:29

JQuery在点击时切换行

回答

相关问题