在 jQuery 中动态创建表 [英] Creating tables dynamically in jQuery
问题描述
我正在使用 jQuery 动态构建一些 I'm building some 未捕获的错误:HIERARCHY_REQUEST_ERR:DOM 异常 3 Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3 这发生在脚本的 appendTo 部分，如下所示: This happens at the appendTo part of a script that looks like this: 其中 有人可以帮我吗?为了完整起见，这是整个代码: Can anyone help me out please? For the sake of completeness, this is the entire code: 我会认真地重新考虑你在做什么.大量的脚本将变得不可维护并且非常难以调试.你不能做所有这些标记创建服务器端并使用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 创建 插件，让你的 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. 您也可以考虑使用一种经过试验和测试的网格插件，并有效地为您创建表格结构.谷歌 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屋！ 数据，但出现以下错误:
<table> data dynamically using jQuery, but I'm getting the following error:
$('<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(' ')
)).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'));
推荐答案
登录
关闭
