我正在从api响应数据创建动态html表。 然后我试图通过另一个api响应获取每行文本的信息。 我想把这个回应显示为jquery accordian。 但是这需要为div标签分配动态id(与行的文本相同)。但是当我试图通过jquery修改div内容时,屏幕上什么也没发生。
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<table>
<thead>
<tr>
<th>Key</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
function populateTable(data) {
$('#tbody').html("");
for (var key in data) {
var eachrow = '<tr>'
+'<td><button id="'+ key+'" class="accordion" onclick="accod()">'+ key+'</button>'
+'<div class="panel" id="'+key+'_panel">'
+'<p>Some Text.</p></div>'+ '</td>'
+ '</tr>';
$('#tbody').append(eachrow);
}
}
function accod() {
var acc = document.getElementsByClassName("accordion");
$('button.accordion').on('click', function(e) {
console.log(this.id);
getData(""+this.id);
});
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = 200 + "px";
}
}
}
}
function getData(key){
$.getJSON("getData", {key :key}, function(data) {
populate(key, data);
});
}
function populate(key, data) {
var panel="#"+key+"_panel";
$(panel).html("");
$.each(data, function (index, item) {
var eachrow = item + "<br>";
$(panel).append(eachrow);
});
}
第二个api响应按预期进行,但它没有显示在div中。