在jQuery中动态创建表 [英] Creating tables dynamically in jQuery
问题描述
我正在使用jQuery动态构建一些< table> 数据，但是我收到以下错误：
I'm building some <table> data dynamically using jQuery, but I'm getting the following error:
未捕获错误：HIERARCHY_REQUEST_ERR：DOM例外3
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);
其中 $ tbody 是 $（'< tbody />'）;
任何人都可以帮帮我吗？为了完整起见，这是整个代码：
Can anyone help me out please? For the sake of completeness, 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(' ')
)).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'));
推荐答案
我会认真地重新考虑你在做什么。脚本的质量将变得不可维护并且难以调试。你能不能做所有这个标记创建服务器端并使用ajax将其加载到dom中。
I would seriously reconsider what your doing. The mass of script is going to become 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.
目前你的方式也会遇到性能问题，特别是如果你有大量的数据。您正在创建多个jquery dom对象并执行多个追加。最好是构建一个字符串或推送到一个数组并只附加到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.
为什么不使用专用的 dom creation 插件，使你的js更具可读性。
Failing that why not use a dedicated dom creation plugin to make your js more readable.
另一个选择是查看 jTemplates 将允许您在js之外定义标记，然后传入要显示的数据。
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.
您也可以考虑使用其中一个经过尝试的网格插件测试并有效地为您创建表结构。 Google jqgrid或flexigrid。
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.
这篇关于在jQuery中动态创建表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
