Accordion Toggle 不扩展表格行 (Javascript)

问题描述

我是 javascript 新手，我正在尝试创建一个嵌套行，当使用手风琴单击时可以查看该行。我已经编写了 javascript 来动态扩展行，但它根本没有扩展。出乎意料的是，它曾经做过，只有第一个元素被扩展，我对我的代码做了很少的更改，然后它们现在都没有扩展，请帮帮我。

 function mainfunction(challenges,targets) {
console.log(challenges)
  var table = document.getElementById('challenge_table_tree')
for (i in challenges) {
    table.innerHTML += '<div class="row accordion-toggle" data-toggle="collapse" data-target="#'+challenges[i].id +'">' +
        '<div class="col">'+ challenges[i].name+'</div>' +
        '<div class="col">'+ challenges[i].id+'</div>' +
        '</div>' +
        '<div class="accordion-body collapse" id="'+challenges[i].id+'"></div>'
    for(j in targets) {
        var hidden_data = document.getElementById(challenges[i].id)
        if(targets[j].challenge_id==challenges[i].id) {
            console.log('here')
            hidden_data.innerHTML += '<div class="row">' +
                '<div class="col">'+targets[j].id+'</div>' +
                '<div class="col">'+targets[j].name+'</div>' +
                '<div class="col">'+targets[j].parent_id+'</div>' +
                '</div>'
        }
    }
}

}

它生成的 Html 是

    <div class="form-group" id="challenge_table_tree">
   <div class="row accordion-toggle" data-toggle="collapse" data-target="#8a263b72-7e61-487a-b756-f7744c9dc623">
      <div class="col">Adersh Ganesh</div>
      <div class="col">8a263b72-7e61-487a-b756-f7744c9dc623</div>
   </div>
   <div class="accordion-body collapse" id="8a263b72-7e61-487a-b756-f7744c9dc623">
      <div class="row">
         <div class="col">4df41507-8c7d-48a8-8cc7-66094dd58844</div>
         <div class="col">undefined</div>
         <div class="col">null</div>
      </div>
   </div>
   <div class="row accordion-toggle" data-toggle="collapse" data-target="#905bd9a2-d47a-4269-9fae-03c6daa46c16">
      <div class="col">Adersh</div>
      <div class="col">905bd9a2-d47a-4269-9fae-03c6daa46c16</div>
   </div>
   <div class="accordion-body collapse" id="905bd9a2-d47a-4269-9fae-03c6daa46c16"></div>
   <div class="row accordion-toggle" data-toggle="collapse" data-target="#7abc296e-9347-405d-9d19-4bea7b29651c">
      <div class="col">aaaaa</div>
      <div class="col">7abc296e-9347-405d-9d19-4bea7b29651c</div>
   </div>
   <div class="accordion-body collapse" id="7abc296e-9347-405d-9d19-4bea7b29651c"></div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）