Fatal编程技术网
  • javascript/
  • 如何在javascript中更改动态创建的按钮的值

如何在javascript中更改动态创建的按钮的值

javascript dom

如何在javascript中更改动态创建的按钮的值,javascript,dom,buttonclick,setattribute,Javascript,Dom,Buttonclick,Setattribute,要求：我有一个表，一行三列。第一列有按钮，第二列和第三列有文本框和复选框 如果我单击该按钮，将动态添加一个新行，与第一行相同。现在，如果我单击新创建的行中的按钮，应该会再添加一行。一旦添加新行，当前行按钮应更改为删除按钮。即，只有最后一行按钮应具有添加功能，而所有其他前一行应具有删除按钮 我写了一些代码，我得到的是，当我点击最后一个按钮和上一个按钮时，会添加新行 我想将以前动态创建的按钮值更改为delete。单击按钮时，其值应更改为delete（然后此按钮应能够删除该行），并应添加新行 请帮助我

要求：我有一个表，一行三列。第一列有按钮，第二列和第三列有文本框和复选框

如果我单击该按钮，将动态添加一个新行，与第一行相同。现在，如果我单击新创建的行中的按钮，应该会再添加一行。一旦添加新行，当前行按钮应更改为删除按钮。即，只有最后一行按钮应具有添加功能，而所有其他前一行应具有删除按钮

我写了一些代码，我得到的是，当我点击最后一个按钮和上一个按钮时，会添加新行

我想将以前动态创建的按钮值更改为delete。单击按钮时，其值应更改为delete（然后此按钮应能够删除该行），并应添加新行

请帮助我获取此输出。我努力了很久。多谢各位

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


在HTML表中添加/删除动态行
函数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=行插入单元格（0）；
var element1=document.createElement（“输入”）；
element1.setAttribute（'type'，'button'）；
element1.setAttribute（'name'，'addrow'+rowCount）；
element1.setAttribute（'value'，'addrow'）；
单元格1.附加子元素（元素1）；
element1.setAttribute（'onclick'，'addRow（'+tableID+'）；
var cell2=行插入单元格（1）；
var element2=document.createElement（“输入”）；
element2.type=“text”；
第2单元。附加子元素（元素2）；
var cell3=行插入单元格（2）；
var element3=document.createElement（“输入”）；
element3.type=“复选框”；
第三单元附属物（第三单元）；
}
如果您愿意使用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);
});
编辑： 此外，如果您选择这种方式，我会删除HTML中的onclick分配，而将添加按钮分配给a。单击jQuery中的处理程序：

$('#dataTable tr:last-child input[type=button]').click(function (event) {
    addRow('dataTable');
});
您愿意为此使用jQuery吗？代码将更加简单和简短，以完成您想要做的事情。我需要用javascript来做。我不知道现在我没有时间用Javascript写出来，但是如果你愿意，可以学习jQuery。一旦你开始，这并不难，它简化了这么多这样的操作。谢谢你。。。当然我会学习javascript。你能给我一些网站或书名吗。。从中我可以从基础开始学习javascript。我对javascript一无所知。这里是一个开始使用jQuery的好地方：