JavaScript 为动态按钮和输入创建函数
JavaScript Creating functions for dynamic buttons and inputs
我使用以下代码创建了 iX2 按钮和文本框:
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>
因此它在 table
的每一行中创建了 2 个按钮和 1 个文本框
现在我想为 "each button" 添加一个函数,这样
第一行的第一个按钮将第一个文本框的值更改为 1,并且
该行的第二个按钮,将第一个文本框的值更改为 0。
等等。
感谢任何帮助!!!
这是将 1/0 输入文本框的代码片段。
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>
我使用以下代码创建了 iX2 按钮和文本框:
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>
因此它在 table
的每一行中创建了 2 个按钮和 1 个文本框现在我想为 "each button" 添加一个函数,这样 第一行的第一个按钮将第一个文本框的值更改为 1,并且 该行的第二个按钮,将第一个文本框的值更改为 0。 等等。
感谢任何帮助!!!
这是将 1/0 输入文本框的代码片段。
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>