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

我正在寫一段代碼來實現「添加新的截止日期」功能。如何使用JavaScript在td旁邊添加td？

我有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之後如果點擊它插入。感謝您的幫助。

來源

2015-12-14 Atif Karbelkar

而不是5按鈕，你可以用一個按鈕，綁定，這將創造TD，並附加功能。 – deepakb

您可以修復你的代碼，以使其工作（沒有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>

來源

2015-12-14 12:40:39 nowhere

這正是我想要的。謝謝！ :) –

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

您可以使用，作爲一個例子，當然根據你的表進行修改。你可以用id指向表格，然後添加你想要的元素。

或者：

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

X可以被存儲在變量中。

希望有幫助！

來源

2015-12-14 12:25:20 Manuel

您可以編寫insertAfter()功能是這樣的：

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

來源

2015-12-14 12:27:48

要插入點擊的元素之後的新元素。請參閱this

removeAttribute將刪除click處理程序。如果你不想停止添加td當時的刪除此行..

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>

Fiddle here

來源

2015-12-14 12:30:40 Rayon

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

回答

相關問題