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>

如果点击button_1，则应在mBuilder.setSmallIcon(R.mipmap.ic_launcher); mBuilder.setLargeIcon(result);之后插入“截止日期1”。谢谢你的帮助。

Answer 1

在单击元素后插入新元素。请参阅this

removeAttribute将删除click处理程序。如果您不想停止添加td，请删除此行..

event.target将返回点击的元素

＆＃13;

function addDeadline(num) {
  var newElem = document.createElement('td');
  newElem.innerText = 'Deadline ' + num;
  event.target.parentNode.insertBefore(newElem, event.target.nextSibling);
  event.target.removeAttribute('onclick')
}

＆＃13;

<table>
  <tr>
    <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>
  </tr>
</table>

＆＃13;

Fiddle here

Answer 2

你可以修改你的代码使其工作（没有jquery只是纯粹的js）：

---
:concurrency: 25
:pidfile: ./tmp/pids/sidekiq.pid
:logfile: ./log/sidekiq.log
:queues:
  - default
  - [high_priority, 2]
  - [import_queue, 3]
  - [user_queue, 4]
:daemon: true
---
:concurrency: 5
:pidfile: ./tmp/pids/sidekiq.pid
:logfile: ./log/sidekiq.log
:queues:
  - small_queue
:daemon: true

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);
}

Answer 3

http://www.w3schools.com/js/js_htmldom_nodes.asp

您可以使用它作为示例，当然根据您的表进行修改。您可以使用id指向该表，并添加所需的元素。

或者：

document.getElementById('TABLE_ID').innerHTML += '<td> Deadline X </td>';

X可以存储在变量中。

希望有所帮助！

Answer 4

您可以像这样编写insertAfter()函数：

function addDeadline(num) {
  $( "<td>Deadline "+num+"</td>" ).insertAfter( "#button_"+num ); 
}

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

4 个答案: