Вопрос по html-table, javascript, dom-manipulation, jquery – Динамическое создание таблиц в jQuery

2

Я строю некоторые<table> данные динамически с использованием jQuery, но я получаю следующую ошибку:

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

Это происходит в приложении к части скрипта, которая выглядит следующим образом:

$('<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'));
Стоит посмотреть на ответы наthis questionДля гораздо менее конкретного примера. Andy Hayden

Ваш Ответ

1   ответ
6

что ты делаешь. Масса сценария станет непригодной для использования и серьезно отлаженной. Можете ли вы не делать все это на стороне сервера создания разметки и использовать ajax для загрузки его в dom.

То, как вы это делаете в данный момент, также может привести к проблемам с производительностью, особенно если у вас большой набор данных. Вы создаете несколько объектов jquery dom и делаете несколько добавлений. Лучше создать строку или передать ее в массив и добавить в dom только один раз. Каждое добавление вызывает перерисовку, которая стоит дорого.

В противном случае почему бы не использовать выделенныйдом создание Плагин, чтобы сделать ваш JS более читабельным.

Другой вариант - посмотреть наjTemplates что позволит вам определить разметку вне js и затем передать данные, которые будут показаны.

Вы также можете рассмотреть возможность использования одного из плагинов сетки, которые были опробованы и протестированы, и эффективно создать структуру таблицы. Google jqgrid или flexigrid.

Кроме того, ваши jTemplates ссылаются на flexigrid. Aistina
Спасибо за ваши предложения, я буду их изучать. Тем не менее, это не объясняет, почему мой текущий код не работает, и я все еще искал какое-то время для быстрого исправления. Aistina
Хорошо спасибо. Я пробовал jTemplates, кажется, работает довольно хорошо. Aistina
На самом деле быстрых решений не существует, так как количество кода довольно сложно понять, что происходит. URL или точная копия вопроса помогут.

Похожие вопросы