Я пишу кусок кода для реализации функциональности «Добавить новые сроки».

У меня есть 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>

«Крайний срок 1» должен быть вставлен после button_1, если на него нажать. Спасибо за вашу помощь.

1
Atif Karbelkar 14 Дек 2015 в 15:20

4 ответа

Лучший ответ

Вы можете исправить свой код так, чтобы он работал (нет 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>
1
nowhere 14 Дек 2015 в 12:40

Вставить новый элемент после нажатия на элемент. см. Этот

removeAttribute удалит обработчик click. Если вы не хотите прекращать добавлять td s, удалите эту строку.

event.target вернет нажатый элемент

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>

Скрипка здесь

1
Community 23 Май 2017 в 12:23

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

Вы можете использовать это в качестве примера, конечно, изменяя его в соответствии с вашей таблицей. Вы можете указать на таблицу с помощью id и добавить нужные элементы.

Или же:

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

X может храниться в переменной.

Надеюсь, это поможет!

0
Manuel 14 Дек 2015 в 12:25

Вы можете написать функцию insertAfter() следующим образом:

function addDeadline(num) {
  $( "<td>Deadline "+num+"</td>" ).insertAfter( "#button_"+num ); 
}
0
Marcos Pérez Gude 14 Дек 2015 в 12:27