javascript - 在 jQuery 中动态创建表

Question

我正在构建一些<table>使用 jQuery 动态数据，但出现以下错误:

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

这发生在脚本的appendTo部分，如下所示:

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

哪里$tbody是 $('<tbody />');

有人可以帮我吗？为了完整起见，这是整个代码:

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

Answer 1

我会认真地重新考虑你在做什么。大量的脚本将变得难以维护并且非常难以调试。你能不能在服务器端完成所有这些标记创建并使用ajax将其加载到dom中。

您目前的方式也会遇到性能问题，特别是如果您有大量数据。您正在创建多个 jquery dom 对象并执行多个附加操作。最好构建一个字符串或推送到一个数组并仅追加到 dom 一次。每次追加都会导致重绘，这是昂贵的。

如果失败，为什么不使用专用的 dom creation插件使你的js更具可读性。

另一个选择是查看 jTemplates这将允许您在 js 之外定义标记，然后传入要显示的数据。

您还可以考虑使用经过尝试和测试的网格插件之一，并有效地为您创建表结构。 Google jqgrid 或 flexigrid。