Question

我正在使用输入来收集表单中的信息，然后动态地将其构建到一个表中，两个示例都很好，但是当我添加一个删除按钮时，我注意到<td>位于<tr>之外{1}}第一个例子。我相信这是因为自动关闭，但是如果我将它添加到第二个附加中，那么它显示为“”......它将第一个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>
`);

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

Answer 2

在追加时你指的是错误的DOM元素。试试这种方式。

var $tbodyAppend = $('tbody');
$tbodyAppend.append("<tr><td><span></span></td><td><span></span></td><td<span</span></td></tr>");

jQuery .append（）并在外面添加

2 个答案: