我正在编写一段代码来实现“添加新截止日期”功能。
我有 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
被点击后插入。
感谢您的帮助。
最佳答案
你可以修改你的代码让它工作(没有 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>
关于javascript - 如何使用 JavaScript 在 td 旁边添加 td?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34266926/