Question

我的问题是：我无法将tr对象追加到thead对象，但是tfoot可以正常工作。

没有错误，警告或其他任何内容，只是在生成的html代码中，thead标签将为空。

var tableObj = $("<table />");
var theadObj = $("<thead />");
var tbodyObj = $("<tbody />");
var tfootObj = $("<tfoot />");

var trObj = $("<tr />");
trObj.append($("<th />").html("colName1"));
trObj.append($("<th />").html("colName2"));
trObj.append($("<th />").html("colName3"));

var trObj2 = $("<tr />");
trObj2.append($("<td />").html("colValue1"));
trObj2.append($("<td />").html("colValue2"));
trObj2.append($("<td />").html("colValue3"));

theadObj.append(trObj); //as you can see in the result, the <thead> will be empty, why?
//theadObj.html('<tr>' + trObj.html() + '</tr>'); //but this works (it so ugly)
            
tfootObj.append(trObj);

tbodyObj.append(trObj2);

tableObj.append(theadObj);
tableObj.append(tbodyObj);
tableObj.append(tfootObj);

$("#test").append(tableObj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>

如果有人有什么想法，请与我分享，谢谢！！

Answer 1

实际上，您可以将其附加到thead，但是这里的问题是要将相同的object附加到thead，然后再附加到tfoot，所以第二个apppend操作省略了第一个操作，对象被移到了tfoot，这就是为什么您只看到它附加到 tfoot 的原因。

下面是一个片段，显示仅将其附加到thead（我注释了将其附加到tfoot的代码）。

var tableObj = $("<table />");
var theadObj = $("<thead />");
var tbodyObj = $("<tbody />");
var tfootObj = $("<tfoot />");

var trObj = $("<tr />");
trObj.append($("<th />").html("colName1"));
trObj.append($("<th />").html("colName2"));
trObj.append($("<th />").html("colName3"));

var trObj2 = $("<tr />");
trObj2.append($("<td />").html("colValue1"));
trObj2.append($("<td />").html("colValue2"));
trObj2.append($("<td />").html("colValue3"));

theadObj.append(trObj); //as you can see in the result, the <thead> will be empty, why?
//theadObj.html('<tr>' + trObj.html() + '</tr>'); //but this works (it so ugly)
            
//tfootObj.append(trObj);

tbodyObj.append(trObj2);

tableObj.append(theadObj);
tableObj.append(tbodyObj);
tableObj.append(tfootObj);

$("#test").append(tableObj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>

因此，总而言之，一个对象只能附加到单个元素上。

jQuery thead对象无法追加tr对象

1 个答案: