create table with jquery. wrong order of code execution?

Question

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.

Is this your actual code? Try first by changing the comment block to actual code. Change /* some variables for tabledata *" probably to /* some variables for tabledata */ — putvande
– putvande, Commented Jan 9, 2014 at 16:21
Is the code you're using actually commented out like that? Or did you do that just for the question? — j08691
– j08691, Commented Jan 9, 2014 at 16:22
Your use of append is wrong: .append('</tr>'); Append() doesn't write string to document but append element. What about reading the DOC? — A. Wolff
– A. Wolff, Commented Jan 9, 2014 at 16:24
i just commented all the variables out for this question. but the variables shouldn't be the problem, they get loaded correct between the td elements — K.S.
– K.S., Commented Jan 9, 2014 at 16:24
When you use .append() you are supposed to be appending complete DOM nodes. $('#div_testausgabe').append('<tr>'); doesn't do what you think. This will append a <tr> tag, not just the opening tag as you think. You need to build the HTML first, then append the whole string. .append() is not the same as appending to a string you don't append the opening tag, the data, and then the closing tag. You call .append() with the entire HTML string. — gen_Eric
– gen_Eric, Commented Jan 9, 2014 at 16:24

Marc B · Accepted Answer · 2014-01-09 16:23:59Z

1

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.

answered Jan 9, 2014 at 16:23

Marc B

362k44 gold badges433 silver badges508 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jeroen · Accepted Answer · 2014-01-09 16:22:54Z

0

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

answered Jan 9, 2014 at 16:22

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

Comments

Roman Hocke · Accepted Answer · 2014-01-09 16:27:36Z

0

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

answered Jan 9, 2014 at 16:27

Roman Hocke

4,2411 gold badge22 silver badges36 bronze badges

Collectives™ on Stack Overflow

create table with jquery. wrong order of code execution?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related