javascript - Creating tables dynamically in jQuery - Stack Overflow

admin管理员组

文章数量:1356930

I'm building some <table> data dynamically using jQuery, but I'm getting the following error:

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

This happens at the appendTo part of a script that looks like this:

$('<tr />').append(
    /* lots of stuff */
).add(
$('<tr />')
).append(
    /* some more */
).appendTo($tbody);

Where $tbody is $('<tbody />');

Can anyone help me out please? For the sake of pleteness, this is the entire code:

$('#visitsContainer').show();

$div = $('<div />').css('margin-top', '7px').css('width', '620px').addClass('groupBox');
$table = $('<table />').attr('cellpadding', '3').attr('cellspacing', '0').attr('width', '620');
$tbody = $('<tbody />');
$('<tr />').append(
    $('<td />').css('width', '45px').attr('valign', 'top').attr('rowspan', '3').attr('align', 'center').append(
        $('<a />').attr('href', '/sparkx/' + userData.username).append(
                $('<img />').attr('src', '/media/profile/40px/' + userData.photo).attr('alt', userData.firstname).attr('border', '1').css('border-color', '#c0c0c0').css('max-width', ' 42px').css('max-height', ' 40px')
        )
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('border-right', '1px dotted #D21C5B').css('width', '200px').append(
        $('<a />').attr('href', '/sparkx/' + userData.username).append(
            $('<strong />').text(userData.fullname)
        ).add(
            $('<br />')
        ).add(
            userData.city)
        )
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('width', '110px').append(
        $('<a />').attr('href', '/profile/' + userData.username + '/sendpm').css('line-height', '18px').append(
            $('<img />').attr('src', '/templates/front/default/images/send_new_icon.gif').attr('alt', 'Stuur bericht').attr('border', '0').attr('align', 'left').css('margin-right', '5px')
        ).append(
            'Stuur bericht')
        )
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('width', '170px').append(
        $('<b />').text(
            'Geplaatst op:')
        ).append(
            ' ' + posted
        )
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('width', '135px').append(
        (month > 0 ?
            $('<b />').text('Was hier:')
            :
            $('<div />').css('width', '1px').html('&nbsp;')
        )).append(month > 0 ? ' ' + months[month] + ' ' + year : '')
    )
).add(
    (rating > 0 ?
        $('<tr />').append(
            $('<td />').attr('colspan', '4').append(
                $('<strong />').css('color', '#D21C5B').text(userData.firstname + ' vond dit ').append(
                    (rating == 3 ?
                        $('<i />').text('een aanrader ').add(
                        $('<img />').attr('src', '/templates/front/default/images/thumbGood.png').attr('alt', 'Goed').attr('height', '16').css('margin-left', '3px')
                        )
                    : (rating == 2 ? 
                        $('<i />').text('een aanrader ').add(
                        $('<img />').attr('src', '/templates/front/default/images/thumbAvg.png').attr('alt', 'Redelijk').attr('height', '16').css('margin-left', '3px')
                        )
                    :
                        $('<i />').text('slecht ').add(
                        $('<img />').attr('src', '/templates/front/default/images/thumbBad.png').attr('alt', 'Slecht').attr('height', '16').css('margin-left', '3px')
                        )
                    ))
                )
            )
        )
    : '')
).add(
    (content ?
        $('<tr />').append(
            $('<td />').attr('colspan', '4').append(
                $('<div />').css('width', '100%').text(content).add(
                $('<div />').css('float', 'right').css('clear', 'both').append(
                    $('<a />').attr('href', '/guide/editreaction/' + id).append(
                        $('<b />').text('edit')
                    ).add(
                    $('<a />').attr('href', thisURL + '/rr/' + id).css('padding-left', '10px').append(
                        $('<b />').text('delete')
                    ))
                ))
            )
        )
    : '')
).appendTo($tbody);
$tbody.appendTo($table);

$table.appendTo($div);
$div.prependTo($('#visits'));

I'm building some <table> data dynamically using jQuery, but I'm getting the following error:

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

This happens at the appendTo part of a script that looks like this:

$('<tr />').append(
    /* lots of stuff */
).add(
$('<tr />')
).append(
    /* some more */
).appendTo($tbody);

Where $tbody is $('<tbody />');

Can anyone help me out please? For the sake of pleteness, this is the entire code:

$('#visitsContainer').show();

$div = $('<div />').css('margin-top', '7px').css('width', '620px').addClass('groupBox');
$table = $('<table />').attr('cellpadding', '3').attr('cellspacing', '0').attr('width', '620');
$tbody = $('<tbody />');
$('<tr />').append(
    $('<td />').css('width', '45px').attr('valign', 'top').attr('rowspan', '3').attr('align', 'center').append(
        $('<a />').attr('href', '/sparkx/' + userData.username).append(
                $('<img />').attr('src', '/media/profile/40px/' + userData.photo).attr('alt', userData.firstname).attr('border', '1').css('border-color', '#c0c0c0').css('max-width', ' 42px').css('max-height', ' 40px')
        )
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('border-right', '1px dotted #D21C5B').css('width', '200px').append(
        $('<a />').attr('href', '/sparkx/' + userData.username).append(
            $('<strong />').text(userData.fullname)
        ).add(
            $('<br />')
        ).add(
            userData.city)
        )
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('width', '110px').append(
        $('<a />').attr('href', '/profile/' + userData.username + '/sendpm').css('line-height', '18px').append(
            $('<img />').attr('src', '/templates/front/default/images/send_new_icon.gif').attr('alt', 'Stuur bericht').attr('border', '0').attr('align', 'left').css('margin-right', '5px')
        ).append(
            'Stuur bericht')
        )
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('width', '170px').append(
        $('<b />').text(
            'Geplaatst op:')
        ).append(
            ' ' + posted
        )
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('width', '135px').append(
        (month > 0 ?
            $('<b />').text('Was hier:')
            :
            $('<div />').css('width', '1px').html('&nbsp;')
        )).append(month > 0 ? ' ' + months[month] + ' ' + year : '')
    )
).add(
    (rating > 0 ?
        $('<tr />').append(
            $('<td />').attr('colspan', '4').append(
                $('<strong />').css('color', '#D21C5B').text(userData.firstname + ' vond dit ').append(
                    (rating == 3 ?
                        $('<i />').text('een aanrader ').add(
                        $('<img />').attr('src', '/templates/front/default/images/thumbGood.png').attr('alt', 'Goed').attr('height', '16').css('margin-left', '3px')
                        )
                    : (rating == 2 ? 
                        $('<i />').text('een aanrader ').add(
                        $('<img />').attr('src', '/templates/front/default/images/thumbAvg.png').attr('alt', 'Redelijk').attr('height', '16').css('margin-left', '3px')
                        )
                    :
                        $('<i />').text('slecht ').add(
                        $('<img />').attr('src', '/templates/front/default/images/thumbBad.png').attr('alt', 'Slecht').attr('height', '16').css('margin-left', '3px')
                        )
                    ))
                )
            )
        )
    : '')
).add(
    (content ?
        $('<tr />').append(
            $('<td />').attr('colspan', '4').append(
                $('<div />').css('width', '100%').text(content).add(
                $('<div />').css('float', 'right').css('clear', 'both').append(
                    $('<a />').attr('href', '/guide/editreaction/' + id).append(
                        $('<b />').text('edit')
                    ).add(
                    $('<a />').attr('href', thisURL + '/rr/' + id).css('padding-left', '10px').append(
                        $('<b />').text('delete')
                    ))
                ))
            )
        )
    : '')
).appendTo($tbody);
$tbody.appendTo($table);

$table.appendTo($div);
$div.prependTo($('#visits'));

• javascript
• jquery
• html-table
• dom-manipulation

Share Improve this question Follow edited Oct 5, 2016 at 18:41 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 4, 2009 at 9:37 AistinaAistina 12.7k1414 gold badges7272 silver badges9191 bronze badges 1

• It's worth looking to the answers to this question, for a much less specific example. – Andy Hayden Commented Jul 17, 2012 at 9:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I would seriously reconsider what your doing. The mass of script is going to bee unmaintainable and seriously hard to debug. Can you not do all this markup creation server side and use ajax to load it into the dom.

The way you have it at the moment is going to encounter performance issues also, especially if you have a large set of data. You are doing creating multiple jquery dom objects and doing multiple appends. It is better to build a string or push to an array and append to the dom only once. Each append causes a redraw which is expensive.

Failing that why not use a dedicated dom creation plugin to make your js more readable.

Another option is to look at jTemplates which will allow you to define the markup outside of the js and then pass in the data to be shown.

You may also consider using one of the grid plugins which are tried and tested and create the table structure for you efficiently. Google jqgrid or flexigrid.

本文标签： javascriptCreating tables dynamically in jQueryStack Overflow