jquery dropdown切換表格行

我正在嘗試爲表格創建一個dropdown toogle。主要目的是當主行被點擊時，其子行必須消失。jquery dropdown切換表格行

問題是，當我插入一個變量到選擇器它不工作。

這裏是一個類似的表：

 <table border="1">  
     <thead> 
      <tr class="btn-info"> 
       <th>header</th> 
       <th>header</th> 
      </tr> 
      </thead> 
      <tr id="main1" class="bg-primary"> 
       <td>maintext1</td> 
       <td>maintext1</td> 
      </tr> 
      <tr name="toggletext1" class="bg-info"> 
       <td>subtext1</td> 
       <td>subtext1</td> 
      </tr> 
      <tr name="toggletext1" class="bg-info"> 
       <td>subtext1</td> 
       <td>subtext1</td> 
      </tr> 
      <tr id="main2" class="bg-primary"> 
       <td>maintext2</td> 
       <td>maintext2</td> 
      </tr> 
      <tr name="toggletext2" class="bg-info"> 
       <td>subtext2</td> 
       <td>subtext2</td> 
      </tr> 
      <tr name="toggletext2" class="bg-info"> 
       <td>subtext2</td> 
       <td>subtext2</td> 
      </tr> 
     </table>

和腳本：

<script>   
     $(document).ready(function(){ 
      for (x=1;x<=500;x++){ 
       $('#main'+x).on('click', function() { 
        $("tr[name=toggletext"+x+"]").slideToggle();  
       }); 
      } 
     });  
     </script>

如果我改劇本，如：

$("tr[name=toggletext1]").slideToggle();

那麼它是工作，但顯然只有名稱爲「toggletext1」的行將會切換。即使我點擊主ID = 2;

任何幫助將被佔用

來源

2016-08-13 bontoo

你只是想切換其他行的某些行點擊右鍵？ – itzmukeshy7

是的。例如你點擊main1行然後所有的toggletext1行必須出現並消失。 – bontoo

正如我所說的，它工作正常，如果我使用$（「tr [name = toggletext1]」）。但當我更改toggletext1爲$（「tr [name = toggletext」+ x +「]」）。slideToggle（）;然後不工作。但我需要使用變量cos會有很多行 – bontoo

試試這個;）

$(document).ready(function() { 
 
    $('.bg-primary').on('click', function() { 
 
    $('.' + $(this).attr('id')).slideToggle(); 
 
    }).css('cursor', 'pointer'); 
 
});

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1"> 
 
    <thead> 
 
    <tr class="btn-info"> 
 
     <th>header</th> 
 
     <th>header</th> 
 
    </tr> 
 
    </thead> 
 
    <tr id="main1" class="bg-primary"> 
 
    <td>maintext1</td> 
 
    <td>maintext1</td> 
 
    </tr> 
 
    <tr class="bg-info main1 hide"> 
 
    <td>subtext1</td> 
 
    <td>subtext1</td> 
 
    </tr> 
 
    <tr class="bg-info main1 hide"> 
 
    <td>subtext1</td> 
 
    <td>subtext1</td> 
 
    </tr> 
 
    <tr id="main2" class="bg-primary"> 
 
    <td>maintext2</td> 
 
    <td>maintext2</td> 
 
    </tr> 
 
    <tr name="toggletext2" class="bg-info main2 hide"> 
 
    <td>subtext2</td> 
 
    <td>subtext2</td> 
 
    </tr> 
 
    <tr name="" class="bg-info main2 hide"> 
 
    <td>subtext2</td> 
 
    <td>subtext2</td> 
 
    </tr> 
 
</table>

來源

2016-08-13 12:00:32 itzmukeshy7

嗨。坦克。它可以工作，但是我不得不擺脫教室裏的皮，否則它什麼也沒有做。而不是這仍然比我的簡單，所以再次。 :-) – bontoo

好的。抱歉。我的錯。 for循環在這裏沒用。我甚至不知道我爲什麼使用它。我需要在這裏改變整個結構。所以當我點擊一個主要行然後我需要得到它的編號（或者我將只使用編號爲編號）和所有與toggletext +編號的名稱需要切換的亞行。

我的錯誤。抱歉。

來源

2016-08-13 11:55:32 bontoo

確定。我做到了。

<script>   
     $(document).ready(function(){ 
      //when a tr is clicked 
      $("tr").on('click', function() { 
       //get the id of the tr     
       var id = $(this).attr('id'); 
       //toggle the subrows with the name + id 
       $("tr[name=toggletext"+id+"]").slideToggle(); 
      }); 
     }); 
     </script>

我改變了的ID（MAIN1，MAIN2）的名稱（1,2，...）

來源

2016-08-13 12:11:54 bontoo

jquery dropdown切換表格行

回答

相關問題