2

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

1 に答える 1

6

私はあなたが何をしているかを真剣に考え直します。大量のスクリプトは保守できなくなり、デバッグが非常に困難になります。このすべてのマークアップ作成サーバー側を実行し、ajax を使用して dom にロードすることはできませんか。

現時点での方法では、特に大量のデータがある場合、パフォーマンスの問題が発生する可能性があります。複数のjquery domオブジェクトを作成し、複数の追加を行っています。文字列を作成するか、配列にプッシュして dom に 1 回だけ追加することをお勧めします。追加するたびに、コストのかかる再描画が発生します。

それに失敗した場合は、専用のdom 作成プラグインを使用して js を読みやすくしてみませんか。

別のオプションは、js の外部でマークアップを定義し、表示するデータを渡すことができるjTemplatesを調べることです。

また、試行錯誤され、テーブル構造を効率的に作成するグリッド プラグインの 1 つを使用することを検討することもできます。Google jqgrid または flexigrid。

于 2009-08-04T09:48:34.593 に答える