创建html手风琴表,但是如何? (不能更改html代码 - 它是由应用程序生成的)
问题描述:
我有一个应用程序生成一个导航菜单作为表。我无法更改生成的表格的格式,也无法将类或其他任何内容添加到导航表中。创建html手风琴表,但是如何? (不能更改html代码 - 它是由应用程序生成的)
我做了表结构,通过应用程序生成的一个例子:
<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
任何任何想法?帮帮我?
答
如果你不能改变源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
答
我不是很确定你在找什么,但是这段代码只是循环遍历所有的表格行并在手风琴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>
好..我不得不承认,这个解决方案适用于JSFiddle,并且正是我正在寻找的,但是...此应用程序在jQuery似乎无法访问的iframe中生成代码。 :(有没有一个简单的JavaScript解决方案,我的问题? – wicked
任何你可以在JQuery中做的事情都可以在JavaScript中完成,尽管更多的时候它会比较棘手,我已经用纯JS解决方案更新了我的答案。 – majita