javascript - jquery append 不会附加来自 for 循环的大 html

Question

我不太清楚为什么当我有很多数据要附加时我没有附加任何数据。

当我有 3 个对象时它工作正常，对于更大的数量它不会附加数据。我相信在 for 循环完成之前调用了 append 。可能是这样吗？

建设<tr>的：

for (var i = 0; i < obj.length; i++) {
    if (obj[i].indiceId === 4 && dinamicDom !== 'dinamic_index_busca_edit') {
        var dateChkBox = '<p class="pDtPeriodoChk"><input type="checkbox" name="dtPeriodoChk" class="dtPeriodoChk" id="' + i + '_chk">Por Período</p>';
        trs = trs + '<tr class="' + dinamicDom + '" style="padding-top:10px;"><td class="smallMediumField ' + i + '" style="padding-top:10px;"><fieldset class="dataFieldset"><legend>' + obj[i].indiceName + '</legend>' + dateChkBox + '<span id="' + i + '_lblDtInicio" class="lblDataInicio" style="display:none"><br />Data Inicio:</span><table><tr><td><img src="/Images/equal.png" alt="Igual a"/></td><td><input type="text" id="' + i + '" name="data" class="selectInput limpar" ';

        if (obj[i].valor !== null && obj[i].valor !== '') {
            trs = trs + ' value="' + obj[i].valor + '" ';
        }    
        trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="data_indices" value="' + obj[i].indiciId + '" class="selectInput"></fieldset></td></tr>';
   } else {
       trs = trs + '<tr class="' + dinamicDom + '"><td class="smallMediumField ' + i + '" style="padding-top:10px;">' + obj[i].indiceName + '<br /><input type="text" id="' + i + '" name="groupBusca" class="selectInput limpar" ';
       if (obj[i].valor !== null && obj[i].valor !== '') {
           trs = trs + ' value="' + obj[i].valor + '" ';
       }
       trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="indicesBusca" value="' + obj[i].indiciId + '" class="selectInput"></td></tr>';
   }

}

附加：

$('#tblBusca').append(trs);

Answer 1

尝试逐行追加

for (var i = 0; i < obj.length; i++) {
    var trs;

    if (obj[i].indiceId === 4 && dinamicDom !== 'dinamic_index_busca_edit') {
        var dateChkBox = '<p class="pDtPeriodoChk"><input type="checkbox" name="dtPeriodoChk" class="dtPeriodoChk" id="' + i + '_chk">Por Período</p>';
        trs = trs + '<tr class="' + dinamicDom + '" style="padding-top:10px;"><td class="smallMediumField ' + i + '" style="padding-top:10px;"><fieldset class="dataFieldset"><legend>' + obj[i].indiceName + '</legend>' + dateChkBox + '<span id="' + i + '_lblDtInicio" class="lblDataInicio" style="display:none"><br />Data Inicio:</span><table><tr><td><img src="/Images/equal.png" alt="Igual a"/></td><td><input type="text" id="' + i + '" name="data" class="selectInput limpar" ';

        if (obj[i].valor !== null && obj[i].valor !== '') {
            trs = trs + ' value="' + obj[i].valor + '" ';
        }    
        trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="data_indices" value="' + obj[i].indiciId + '" class="selectInput"></fieldset></td></tr>';
   } else {
       trs = trs + '<tr class="' + dinamicDom + '"><td class="smallMediumField ' + i + '" style="padding-top:10px;">' + obj[i].indiceName + '<br /><input type="text" id="' + i + '" name="groupBusca" class="selectInput limpar" ';
       if (obj[i].valor !== null && obj[i].valor !== '') {
           trs = trs + ' value="' + obj[i].valor + '" ';
       }
       trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="indicesBusca" value="' + obj[i].indiciId + '" class="selectInput"></td></tr>';
   }

    $('#tblBusca').append(trs);
}