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在點擊時切換行

回答

相關問題