创建html手风琴表，但是如何？ （不能更改html代码 - 它是由应用程序生成的）

Question

我有一个应用程序生成一个导航菜单作为表。我无法更改生成的表格的格式，也无法将类或其他任何内容添加到导航表中。

我做了表结构，通过应用程序生成的一个例子：

<table class="APPLIST"> 
    <tr > 
     <td class="APPNAME">Appname 1</td> 
    </tr> 
    <tr> 
     <td class="EP">Element</td> 
    </tr> 
    <tr > 
     <td class="EP">Element</td> 
    </tr> 
    <tr > 
     <td class="APPNAME">Appname 2</td> 
    </tr> 
    <tr > 
     <td class="EP">Element</td> 
    </tr> 
    <tr > 
     <td class="EP">Element</td> 
    </tr> 
    <tr > 
     <td class="EP">Element</td> 
    </tr> 
    </table> 

目标IST得到一个手风琴导航出这个样品可能通过使用jQuery或只是使用Javascript。

我在网上搜索了解决方案。我发现了很多示例，但没有与Table-Data一起解决。基本上，它应该这样做this

任何任何想法？帮帮我？

Answer 1

如果你不能改变源HTML表格，你可以使用jQuery和CSS仍然操纵它。我复制和修改，您链接到告诉你如何能做到这一点的jsfiddle -

$('tr').html(function() { 
     //if the td within this tr doesn't have a APPNAME class then hide it 
     if (!$(this).find('td').hasClass('APPNAME')) { 
     $(this).hide(); 
     } else { 
     $(this).addClass('accordion'); 
     } 
    }); 

    $(".APPLIST tr").click(function() { 
     $(this).nextUntil('.accordion').stop(true, true).fadeToggle(500); 
    }); 

这里是工作JSFiddle

这里是一个纯粹的工作JS解决方案JSFiddle

Answer 2

我不是很确定你在找什么，但是这段代码只是循环遍历所有的表格行并在手风琴div上添加一个新的'accordion panel'。之后，只是初始化手风琴与.accordion()

$('tr').each(function(e) { 
 
    $('#accordion').append('<h3>' + $(this).find('td').text() + '</h3><div>text...</div>'); 
 

 
}); 
 
    $('#accordion').accordion();

.APPLIST{ 
 
display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 

 
<table class="APPLIST"> 
 
    <tr> 
 
    <td class="APPNAME">Appname 1</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="EP">Element</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="EP">Element</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="APPNAME">Appname 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="EP">Element</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="EP">Element</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="EP">Element</td> 
 
    </tr> 
 
</table> 
 

 

 
<div id='accordion'></div>