Question

我正在尝试为表格创建一个下拉菜单。主要目的是在单击主行时，其子行必须消失。

问题是当我将一个变量插入选择器时它无法正常工作。

这是一张类似的表格：

     <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;

任何帮助都将被挪用

Answer 1

确定。抱歉。我的错。这里的for循环没用。我甚至不知道为什么我用它。我需要在这里改变整个结构。所以当我点击一个主行然后我需要得到它的ID号码（或者我可能只使用id的数字）并且所有名称为toggletext + id号的子行都需要切换。

我的错误。抱歉。

Answer 2

确定。我做到了。

<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，...）

jquery下拉切换表行

2 个答案: