создать таблицу с jquery. неправильный порядок выполнения кода?

Question

У меня другая проблема с кодом jquery. Вот несколько примеров кода:

$(document).on('click', 'input.goto_batterie_pruefung', function() { 
    /** some code**/ 
    $.ajax({ 
     url: "example.php", 
     type: "post", 
     data: /* some data */, 
     datatype: "json", 
     success: function(data) { 

      var data=$.parseJSON(data); 

      $('#div_testausgabe').html(''); 
      $('#div_testausgabe').append('<hr /><table><thead><tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead><tbody>'); 

      $.each(data, function(index, value) { 
        /* some variables for tabledata */ 

       $('#div_testausgabe').append('<tr>'); 
       var text='<td>'+data+'</td><td>'+data+'</td><td>'+data+'</td><td>'+data+'</td><td>'+data+'</td><td>'+data+'</td><td>'+data+'</td>'; 
       $('#div_testausgabe').append(text); 
       $('#div_testausgabe').append('</tr>'); 
      }); 

      $('#div_testausgabe').append('</tbody></table><hr />'); 

     } 
    }); 
}); 

Моя проблема заключается в том, что таблица не получает создан правильно. теги таблицы будут окружать только часть thead.

Answer 1

Не добавляйте частичный html, вы будете обновлять DOM много раз, делая его медленнее и вызывая множественные перерисовки, и браузер попытается исправить его.

Вы должны построить строку html и добавить, что в конце после цикла $.each().

Что-то вроде:

$('#div_testausgabe').html(''); 
var table_html = '<hr /><table><thead><tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead><tbody>'; 

$.each(data, function(index, value) { 
    table_html += '<tr><td>'+data+'</td><td>'+data+'</td><td>'+data+'</td><td>'+data+'</td><td>'+data+'</td><td>'+data+'</td><td>'+data+'</td></tr>'; 
}); 

table_html += '</tbody></table><hr />'; 
$('#div_testausgabe').append(table_html); 

Answer 2

Вы определенно строит таблицу неправильно. .append() собирается быть добавлением к вашей <div id="div_testausgabe">, так что вы в конечном итоге с

<div> id="div_testausgabe"> 
    <hr /><table><thead> blah blah blah from your first .append call</table> 
    <tr><td>row #1 from the .each() call></tr></td> 
    <tr><td>row #2 from the .each() call()</tr></td> 
    etc... 
</div> 

Вам необходимо изолировать фактическую таблицу внутри DIV, например

$('#div_testausgabe table tbody').append(....); 
        ^^^^^^^^^^^ 

, так что ваши новые узлы tr/td находятся в правильном месте.

Answer 3

Вы используете jQuery append(), как если бы это была конкатенация строк, а это не так.