Создать динамическую таблицу: раздел с заголовком / меткой - связанные с ним динамические строки, столбцы, а затем снова аналогичный раздел

Question

Я пытаюсь создать динамическую таблицу с макетом ниже, когда нажимаю кнопку (я не могу прикрепить изображение, поэтому ниже показан пример кода, который является лишь примером, чтобы получить представление о том, что я пытаюсь но я хочу, чтобы все было динамично в реальном сценарии).

<table>
    <th colspan="2">Group1</th>
    <tr> <td> section1a</td> <td> staff1a</td> </tr>
    <tr> <td> section1b</td> <td> staff1b</td> </tr>
    <tr> <td> section1c</td> <td> staff1c</td> </tr>
    <th colspan="2">Group2</th>
    <tr> <td> section2a</td> <td> staff2a</td> </tr>
    <tr> <td> section2b</td> <td> staff2b</td> </tr>
    <tr> <td> section2c</td> <td> staff2c</td> </tr>
</table>

Я использую Javascript, Ajax и PHP в качестве бэкэнда. Я создаю теги div, table, th, tr, td, используя методы document.createTextNode, appendChild, но добавляется только последнее значение в массиве, и я получаю что-то вроде следующего:

<div> <div> Group1 </div> <div> Group2 </div> </div>
<table> <tr> <td>section1c </td> </tr> <tr> <td> section2c </td> </tr>

Мой фактический код:

var dvContainer=document.getElementById('dvContainer');
            var div= document.createElement('div');   
            $.ajax({
                  url: 'data.php',
                  method:'post',
                  data:'selectedDivHome=' + selectedDivHome
              }).done(function(groupsHome){
                  console.log(groupsHome);
                  groupsHome=JSON.parse(groupsHome);
            for (var i = 0; i < groupsHome.length; i++){
                var divgrp= document.createElement('div');                
                var grpHomeid= groupsHome[i].groupid;
                var textnodegrp= document.createTextNode((groupsHome[i].groupdesc));
                divgrp.appendChild(textnodegrp);
                div.appendChild(divgrp);
                $.ajax({
                url: 'data.php',
                method:'post',
                data:'grpHomeid=' + grpHomeid
                    }).done(function(sectionsHome){
                console.log(sectionsHome);                       
                sectionsHome=JSON.parse(sectionsHome);
                    for (var j = 0; j < sectionsHome.length; j++){
                        var table= document.createElement('TABLE');
                        var tr= document.createElement('tr');
                        var td= document.createElement('td');
                        var textnodetr= document.createTextNode(sectionsHome[j].sectiondesc);
                        td.appendChild(textnodetr);
                        tr.appendChild(td);
                        table.appendChild(tr);                       
                    }
                    div.appendChild(table);                   
                });                    

                dvContainer.appendChild(div);  
            }
         });

Answer 1

Использование вызовов Ajax в for loop - плохая идея. Когда браузер выполняет метод $.ajax, он продолжает выполнять следующие строки кодов, поэтому сразу после вашего $.ajax вызова браузер продолжает for loop, и случайным образом (в зависимости от сетевой задержки и времени обработки сервера) приходит результат ajax back и done метод будет выполнен. Метод done крадет исполняющую точку у вашего for loop. Так что случайные неожиданные вещи произойдут. Имейте в виду следующее:

1. Вызов ajax должен быть последним фрагментом кода, который должен быть выполнен, прежде чем он вернется с сервера.
2. Таким образом, следующий ajax-вызов должен быть выполнен в ajax success (done) или функции ошибки, которая означает, что после возвращения результата.