How to add a td just next to a td using JavaScript?

Question

I am writing a piece of code to implement an "Add New Deadlines" functionality.

I have 5 "Add" buttons:

 <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>

I want to implement a javascript addDeadline(num) that can insert the below td after the clicked button.

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

"Deadline 1" should be inserted after the button_1 if it is clicked. Thanks for your help.

Instead of 5 button you can use one button and bind a function which will create TD and append. — Deepak Biswal, Dec 14 '15 at 12:26

score 1 · Answer 1 · edited May 23 '17 at 12:23

To insert new element after clicked element. Refer this

removeAttribute will remove click handler. If you do not want to stop adding tds then remove this line..

event.target will return clicked element

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

<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>

Fiddle here

score 1 · Accepted Answer · answered Dec 14 '15 at 12:40

You can fix your code to this to make it work (no jquery just pure 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>

This is exactly what I wanted. Thanks! :) – Atif Karbelkar Dec 15 '15 at 06:02 — Atif Karbelkar, Dec 15 '15 at 06:02

score 0 · Answer 3 · answered Dec 14 '15 at 12:25

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

You can use that as an example, of course modifying it according to your table. You can point to the table with the id, and the add the elements you want.

Or:

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

X can be stored in a variable.

Hope that helps!

score 0 · Answer 4 · answered Dec 14 '15 at 12:27

0

You can write insertAfter() function like this:

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

answered Dec 14 '15 at 12:27

Marcos Pérez Gude

21,869
4
38
69

How to add a td just next to a td using JavaScript?

4 Answers4