如何更改javascript中動態創建的按鈕的值

要求：我有一個包含一行和三列的表。第一列包含按鈕，第二列和第三列包含文本框和複選框。如何更改javascript中動態創建的按鈕的值

如果我點擊那個按鈕，一個新行被動態添加爲與第一行相同。現在，如果我點擊新創建的行中的按鈕，應該添加一行。一旦新行添加，當前行按鈕應該改變爲刪除按鈕。只有最後一行按鈕應該具有添加功能，並且所有其他前一行應該具有刪除按鈕。

我寫了一些代碼，帽子即時得到的，添加新行當我點擊最後一個按鈕以及先前的按鈕..

我想改變以前的動態創建按鈕值delete.while單擊該按鈕，其值將更改爲刪除（然後此按鈕應能夠刪除該行）並添加新行。

請幫我拿到這個輸出。即時嘗試。謝謝。

<html> 

<head runat="server"> 

<TITLE> Add/Remove dynamic rows in HTML table </TITLE> 

<SCRIPT language="javascript"> 

    function addRow(tableID) { 
     var e1=document.documentElement.getElementsByTagName('input'); 

     var table = document.getElementById(tableID);  
     var rowCount = table.rows.length;  
     var row = table.insertRow(rowCount); 
     var cell1 = row.insertCell(0); 
     var element1 = document.createElement("input"); 
     element1.setAttribute('type','button'); 
     element1.setAttribute('name','Add Row'+rowCount); 
     element1.setAttribute('value','Add Row');    
     cell1.appendChild(element1); 
      element1.setAttribute('onclick','addRow("'+tableID+'")');  
     var cell2 = row.insertCell(1); 
     var element2 = document.createElement("input"); 
     element2.type = "text"; 
     cell2.appendChild(element2); 

     var cell3 = row.insertCell(2); 
     var element3 = document.createElement("input"); 
     element3.type = "checkbox"; 
     cell3.appendChild(element3);  
    } 
</script> 

</head> 

<BODY> 

<TABLE id="dataTable" width="250px" border="1"> 

<TR> 

<td><INPUT type="button" value="Add Row" name="Add Row0" onclick="addRow('dataTable')"/></td> 
<TD> <INPUT type="text" /> </TD> 

<TD><INPUT type="checkbox" name="chk"/></TD> 

</TR> 

</TABLE> 

</BODY> 
</html>

來源

2012-10-30 pughalveni

你願意使用jQuery嗎？代碼將會更簡單和更短，以完成你想要做的事情。 – davidethell

如果你願意使用jQuery的答案是這樣的簡單：

// First clone the last row as a new row 
$('#dataTable tr:last-child').clone().appendTo('#dataTable'); 
// Now change all buttons except the last row to call a delete function 
$('#dataTable tr:not(tr:last-child) input[type=button]').click(function (event) { 
    // Passing this to the function sends the button element from which you could determine the parent or whatever else you need 
    deleteRow(this); 
});

編輯：另外，我想刪除的onclick分配在你的HTML，如果你選擇了這種方式工作和相反，分配添加按鈕一個.jlick從jQuery處理程序：

$('#dataTable tr:last-child input[type=button]').click(function (event) { 
    addRow('dataTable'); 
});

來源

2012-10-30 10:13:24 davidethell

你知道如何在JavaScript中做到這一點。我需要在JavaScript中做。我不知道jquery – pughalveni

我現在沒有時間用Javascript寫出來，但如果你願意，可以學習jQuery。一旦你開始，這並不是很困難，它簡化了這麼多種類的操作。 – davidethell

謝謝你......當然我會學習javascript。你能給我一些網站或書名..從我可以開始從基礎學習JavaScript。我不知道任何東西的JavaScript。 – pughalveni

如何更改javascript中動態創建的按鈕的值

回答

相關問題