用jquery创建表。 错误的代码执行顺序？

i've got another problem with my jquery code. Here some example code:

$(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 />');

        }
    });
});

My problem is that the table doesn't get created correctly. the table tags will surround only the thead part.

Don't append partial html, you will be updating the DOM a lot of times, making it slower and causing multiple redraws and the browser will try to correct it.

You should build a string of html and append that at the end, after the $.each() loop.

Something like:

$('#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);

You're definitely building the table wrong. .append() is going to be appending to your <div id="div_testausgabe">, so you end up with

<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>

You need to isolate the actual table inside your div, e.g.

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

so that your new tr/td nodes are going into the correct location.

You are using jQuery's append() as if it was a string concatenation, which it isn't.