javascript - 如何使用 JavaScript 在 td 旁边添加 td？

Question

我正在编写一段代码来实现“添加新截止日期”功能。

我有 5 个“添加”按钮:

 <td class="imgButton" style="width: 185px; text-align: center;"
 onclick="addDeadline(1)" id="button_1">Add Deadline</td>

 <td class="imgButton" style="width: 185px; text-align: center;"
 onclick="addDeadline(2)" id="button_2">Add Deadline</td>

 <td class="imgButton" style="width: 185px; text-align: center;"
 onclick="addDeadline(3)" id="button_3">Add Deadline</td>

 <td class="imgButton" style="width: 185px; text-align: center;"
 onclick="addDeadline(4)" id="button_4">Add Deadline</td>

 <td class="imgButton" style="width: 185px; text-align: center;"
 onclick="addDeadline(5)" id="button_5">Add Deadline</td>

我想实现一个 javascript addDeadline(num) 可以在点击按钮后插入下面的 td。

<td>Deadline 1</td>
<td>Deadline 2</td>
<td>Deadline 3</td>
<td>Deadline 4</td>
<td>Deadline 5</td>

"Deadline 1" 应该在 button_1 被点击后插入。感谢您的帮助。

Answer 1

你可以修改你的代码让它工作(没有 jquery 只是纯 js):

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode,   referenceNode.nextSibling);
}

function addDeadline(num, caller) {
  var el = document.createElement("td");
  el.innerHTML = "Deadline" + num;
  insertAfter(caller, el);
}

<table>
  <tr>
    <td class="imgButton" style="width: 185px; text-align: center;" onclick="javascript:addDeadline(1,this)" id="button_1">Add Deadline</td>

    <td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(2,this)" id="button_2">Add Deadline</td>

    <td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(3,this)" id="button_3">Add Deadline</td>

    <td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(4,this)" id="button_4">Add Deadline</td>

    <td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(5,this)" id="button_5">Add Deadline</td>
  </tr>
</table>