Question

我正在创建一个JavaScript进度条，条形图本身和详细消息都在表格中。现在，我创建了这个，以便所有需要在页面中的内容都是div，然后课程将在创建时填写其余部分。因为它在一个表中，所以条形和消息应该在不同的行上，但是当我尝试使用jQuery创建行时，它们不会被生成并且唯一被放入的行tables是两个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插入单元格，请对div执行相同的操作：

tdBar.append(divBar);

jQuery没有创建表行元素

1 个答案: