下载HTML表格

时间:2016-06-23 09:22:58

标签: javascript html

请在HTML中提供以下方案的代码: 带行的表 row1 row2 row3

在选择row1时,表应提供下拉row1.1和row1.2 row1 -row1.1 -row1.2 row2 row3

在进一步选择row1.1时,该表应提供下拉行1.1.1 row1 -row1.1 -row1.1.1 -row1.2 row2 row3

我是HTML的初学者。请指导我完成这个。

2 个答案:

答案 0 :(得分:0)

据我所知,你需要一个accordian。它是一堆行,当您选择其中一行时,它会扩展为子菜单。见here

答案 1 :(得分:0)

所以,最后我设法为我的情况获取代码。 用于执行下拉功能的Java脚本:

$(document).ready(function()
         {
             $('.RowFather').click(function ()
             {
                 $(this).nextAll('tr').each( function()
                 {
                    if ($(this).is('.RowChild'))
                    {
                       $(this).toggle();;
                    } 
                    else if ($(this).is('.RowGrandChild'))
                    {
                       $(this).hide();;
                    } else {
                        return false;
                    }

                 });
             });

             $('.RowChild').click(function ()
             {
                 $(this).nextAll('tr').each( function()
                 {
                    if ($(this).is('.RowGrandChild'))
                    {
                       $(this).toggle();;
                    } else {
                        return false;
                    }

                 });
             });
             $('.RowFather').nextAll('tr').each( function() {
             if(!($(this).is('.RowFather')))
                 $(this).hide();
            });

         });

HTML:

<tr class="RowFather">
<td>Father</td>
</tr>
<tr class="RowChild">
<td>child</td>
</tr>
 <tr class="RowGrandChild">
 <td> grandchild</td>
 </tr>