javascript - jQuery 没有创建表格行元素

Question

我正在创建一个 JavaScript 进度条，进度条本身和详细消息都在一个表格中。现在，我正在创建它，以便页面中需要的所有内容都是 div，然后该类将在创建时填充其余部分。因为它在一个表中，栏和消息应该在不同的行上，但是当我尝试使用 jQuery 创建行时，它们不会生成，唯一被放入表中的是两个 td 元素.

我目前拥有的代码在下方。我尝试了几种不同的方法来完成我认为可行的方法。

• 我曾尝试使用 .wrap('<tr></tr>') 尝试获取它，然后再将其放入表中，并在对表的调用中(即 tdMessage.wrap('<tr></tr>') 和 tdMessage.wrap('<tr></tr>').html())。
• 我尝试了 document.createElement('tr') 和 $('<tr></tr>')，并在将其放入表中时调用了 .html()。

我觉得那里也有另一种尝试……但我想不出那是什么。

var tdMessage = $(document.createElement('td'));
tdMessage.prop('id', this.MessageId.substr(1));
tdMessage.css('text-align', 'center');
//tdMessage.wrap('<tr></tr>');
//var trRow2 = $(document.createElement('tr'));
var trRow2 = $('<tr></tr>');
trRow2.html(tdMessage);
tdMessage = null;

var divBar = $(document.createElement('div'));
divBar.prop('id', this.BarId.substr(1));
divBar.css('width', '0%');
divBar.css('height', '15px');
divBar.css('background', 'url(images/LoadingBarBG.gif)');

var tdBar = $(document.createElement('td'));
tdBar.css('border', '1px #B0B1B1 solid');
tdBar.css('padding', '1px');
tdBar.html(divBar);
//tdBar.wrap('<tr></tr>');
divBar = null;

//var trRow1 = $(document.createElement('tr'));
var trRow1 = $('<tr></tr>');
trRow1.html(tdBar);
tdBar = null;

var tblInner = $(document.createElement('table'));
tblInner.prop('width', '400');
tblInner.prop('cellpadding', '0');
tblInner.prop('cellspacing', '0');
tblInner.prop('border', '0');
tblInner.html(trRow1.html() + trRow2.html());
trRow1 = null;
trRow2 = null;

我可能只是遗漏了一些东西，但我一辈子都弄不明白。一切看起来都应该有效，其他一切似乎也是如此。

此外，它不断生成的 HTML 要么只是将两个 td 元素放在表中，而没有 tr 元素包围它们，要么它甚至只是放置条形图 td 并省略消息一。

感谢您的帮助。

Answer 1

不要使用 .html() 因为你拥有的一切都是一个 jQuery 对象，而不是原始 HTML，而是将单元格附加到行中:

trRow2.append(tdMessage);

trRow1.append(tdBar);

然后将行追加到表中:

tblInner
    .append(trRow1)
    .append(trRow2);

当你想将它插入单元格时，对你的 div 做同样的事情:

tdBar.append(divBar);