Question

我想使用jQuery创建一个表。目前我有一个空的表体，我想用一些jQuery来填充表格：

var $tr = $("<tr>"),
  $td = $("<td>");
var date = '2018-01-01'
$td.text(date);
$tr.append($td);

$td.text("New Years");
$tr.append($td);

$("#body").append($tr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id='body'>

  </tbody>
  <table>

但这只会附加第二个td。第一个被覆盖。关于如何解决的任何想法？

Answer 1

与评论中提到的Try it online!一样，如果元素已经在DOM中，则.append只会＆＃34;移动它＆＃34;。

现在在您的示例中，您将其附加到相同位置，但也更改文本。

尝试使用Taplar方法复制元素。

＆＃13;

var $tr = $("<tr>");
var $td = $("<td>");
var date = '2018-01-01';

$td.text(date);
$tr.append($td);

var secondCell = $td.clone().text("New Years");
$tr.append(secondCell);

$("#body").append($tr);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id='body'>

  </tbody>
</table>

＆＃13;

Answer 2

＆＃13;

<PersistGate loading={<View><Text>Loading...</Text></View>} persistor={persistor}>
      <Navigator />
</PersistGate>

＆＃13;

var $tr1 = $("<tr>"),
  $tr2 = $("<tr>"),
  $tr3 = $("<tr>"),
  $td = $("<td>");
var date = '2018-01-01';

$td.text(date);

//various ways to accomplish it
$tr1.append($td.prop('outerHTML'));
$tr2.append($td.clone());
$tr3.append($('<td>', { text: date }));

$td.text("New Years");
$tr1.append($td.prop('outerHTML'));
$tr2.append($td.clone());
$tr3.append($('<td>', { text: 'New Years' }));

$("#body").append([$tr1, $tr2, $tr3]);

＆＃13;

Answer 3

您必须克隆$ td，以便DOM将其视为新元素。

＆＃13;

DocumentClient

＆＃13;

var $tr = $("<tr>"),
  $td = $("<td>");
var date = '2018-01-01'
$td.text(date);
$tr.append($td.clone());

$td.text("New Years");
$tr.append($td.clone());

$("#body").append($tr);

＆＃13;

Answer 4

您可以在没有jquery的情况下尝试下一个代码：

let tbody =  document.querySelector('#body');
let tr =  document.createElement('tr');
let td = document.createElement('tr');
td.textContent = '2018-01-01';;
let tdClone = td.cloneNode();
tdClone.textContent = "New Years";
tr.append(td,tdClone);
tbody.append(tr);

我认为这是正确的方法，因为您可以创建新的td而不是克隆创建的td（例如，这个td可能有特殊的类或属性），并且只有在表中插入tr后才能重新编写DOM。

Answer 5

嗯......也许这可能是另一种选择：

var texts = ["2018-01-01", "New Years"];

$.each(texts, function(i, val){
    $("<tr><td>"+val+"</td></tr>").appendTo("#body")
});

$.each获取数组texts上的每个项目，将其打包在tr和td上，然后附加到#body上的结果。

working fiddle

JQuery Multiple Append仅附加最后一个

5 个答案: