Question

我正在使用jQuery动态构建一些<table>数据，但是我收到以下错误：

未捕获错误：HIERARCHY_REQUEST_ERR：DOM异常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。

在jQuery中动态创建表

1 个答案: