Question

我正在尝试构造一个tr，然后用html表的第一行替换。我有一个变量newHeaderRow，其中我添加了jQuery对象，然后我用replaceWith用这个变量替换表的第一行。问题是表中没有添加dom元素，只是显示

[object object] [object object] [object object]

代替第一行

具体

我的代码中有3个部分，我创建了像

这样的dom元素

     result = $("<td/>",
     {
       align: "center",
       colspan: var1
    }).text("something");

    newHeaderRow += result;

并且在newHeaderRow中添加了一些tds之后我使用

     $('tr[class*="row#"]').eq(n)
        .replaceWith(newHeaderRow);

替换行。

我知道如果我使用普通的javascript并使用了一些东西

result =  "<td  align='center'  colspan='" + countGroupBys + "'>" + "something" + "
  </td>"

我在newHeaderRow中添加3个字符串，然后使用replaceWith它将起作用。但我不希望我的代码长而且不易读取字符串。

在jQuery术语中，如何在替换中传递dom元素并更改表？

Answer 1

您正在尝试将jQuery对象添加为字符串。尝试先将其转换为字符串。你可以通过询问内部节点元素来获取它的 outerHTML

此：

   newHeaderRow += result;

应该成为这个：

   newHeaderRow += result[0].outerHTML;

var newTds = "";
for (var i = 0; i < 3; i++) {
  var td = $('<td>', {
    align: "center",
    colspan: 1
  }).text('Header: ' + (i+1));
  
  newTds += td[0].outerHTML
}

$('#apple').replaceWith(newTds)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="apple">
      Apple
    </td>
  </tr>
</table>

这个小提琴的例子： https://jsfiddle.net/fghajk48/

Answer 2

只需将newHeaderRow jQuery对象和append()单元格对象设为

var newHeaderRow = $('<tr>');

// ......

result = $("<td/>", {
  align: "center",
  colspan: var1
}).text("something");

newHeaderRow.append(result);

//.....

$('tr[class*="row#"]').eq(n)
  .replaceWith(newHeaderRow);

Answer 3

你不能像在这里那样连接对象（因为$()返回一个jQuery对象）：

result = $("<td/>",
{
    align: "center",
    colspan: var1
}).text("something");

newHeaderRow += result;

但是，您必须检索元素的内容，以便更改最后一行：

newHeaderRow += result[0].outerHTML;

显然，如果你只需要用一个jQuery对象替换它，就不需要[0].outerHTML。另一点：.replaceWith()也会替换目标元素（在这种情况下为<tr>），因此请确保newHeaderRow还包含<tr>标记。

使用jQuery对象时，替换tr显示错误的结果

3 个答案: