javascript - jQuery .append() <tr> 和 <td> 在 <tr> 之外添加 <td>

Question

我正在使用输入来收集表单中的信息，然后将其动态构建到一个表中，这两个示例都很好，但是当我添加一个删除按钮时，我注意到 <td>在<tr> 之外用第一个例子。我相信那是因为自动关闭，但如果我将它添加到第二个追加中所以它显示为“”......它将第一个 td 放在它自己的行上，其余的放在新的行上。

知道我做错了什么以及如何解决它。将所有内容都放在一行中是可行的，但我不喜欢我的代码看起来多么困惑。

var $tbodyAppend = $('table > tbody:last-child');
// this puts the <td>'s outside the tr, but looks correct on the page
$tbodyAppend.append("<tr>");
$tbodyAppend.append("<td><span></span></td>");
$tbodyAppend.append("<td><span></span></td>");
$tbodyAppend.append("<td><span></span></td>");

// this puts the <td>'s in the <tr>
$tbodyAppend.append("<tr><td><span></span></td><td><span></span></td><td><span></span></td>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th><span>column 1</span></th>
    <th><span>column 2</span></th>
    <th><span>column 3</span></th>
  </tr>
  <tbody>
    <!-- want jQuery to append here -->
  </tbody>
</table>

Answer 1

它们在外面是因为您将它们放在外面。不关闭 <tr>并不意味着您没有附加整个 tr元素。

相反，使用模板文字附加单个字符串。

var $tbodyAppend = $("table > tbody:last-child").append(`
  <tr>
    <td><span> ${variableHere} </span></td>
    <td><span></span></td>
    <td><span></span></td>
  <tr><td><span></span></td><td><span></span></td><td><span></span></td>
`);

这不仅允许多行字符串，而且还允许您使用字符串插值在需要时将任何表达式值插入到字符串中。