JavaScript为动态按钮和输入创建函数

Question

I have created iX2 buttons and i textboxes with the following code:

 function AddIt(){ for (var i=1; i < 4; i++) { var tr = document.createElement("tr"); var td = document.createElement("td"); var button = document.createElement("button"); var button2 = document.createElement("button"); var input = document.createElement("input"); tr.id= "tr"+[i]; td.id= "td"+[i]; button.id= "BT"+[i]; button.innerHTML = "BT"+[i]; button.name= "BT"; button.classList.add("BT"); button2.id= "BT"+[i]+".1"; button2.innerHTML = "BT"+[i]+".1"; button2.name= "BT2"; button2.classList.add("BT2"); input.id="TB"+[i]; input.style="width:40px" input.value = "TB"+[i]; var Table = document.getElementsByTagName("Table")[0]; Table.append(tr); Table.append(td); td.append(button); td.append(button2); td.appendChild(input); }; }; 

 <input type="button" value="Add Textbox" onClick="AddIt()"> <table id="Table" name= "Table" cellpadding="5" border="0" > <tbody> <tr> </tr> </tbody> </table> 

so it creates 2 buttons and 1 textbox in each row of the table

Now I want to add a function for "each button", so that the first button of the first row changes the value of the first textbox to 1, and the second button of that row, changes the value of the first textbox to 0. and so on.

any help is appreciated!!!

Answer 1

Here is a code snippet which inputs the 1/0 to the textboxes.

 for (var i=1; i < 4; i++) { var tr = document.createElement("tr"); var td = document.createElement("td"); var button = document.createElement("input"); var button2 = document.createElement("input"); var input = document.createElement("input"); button.type="button"; button.id= "BT"+[i]; button.value = "BT"+[i]; button.classList.add("BT"); button2.type="button"; button2.id= "BT"+[i]+".1"; button2.classList.add("BT2"); button2.value ="BT"+[i]+".1"; input.id="TB"+[i]; function assign(textElt){ button.onclick = function(){ textElt.value = 1; } button2.onclick = function(){ textElt.value = 0; } } var Table = document.getElementsByTagName("Table")[0]; Table.append(tr); Table.append(td); td.append(button); td.append(button2); td.appendChild(input); assign(input); }; 

 <table> </table>