[英]Iterating through different text box in java script and assigning values
I was trying to iterate in loop through text boxes and assign values to it. 我试图遍历文本框并为其分配值。 I have created three array list
ids[]
, id1s[]
, id2s[]
. 我创建了三个数组列表
ids[]
, id1s[]
和id2s[]
。
values in ids[]
have to be populated in the first column and its coming fine. ids[]
值必须在第一列中填充,并且可以正常使用。 but values in id1s[]
and id2[]
need to be populated in the 2nd and 3rd column. 但是
id1s[]
和id2[]
需要填充在第二列和第三列中。 loop run 5 times. 循环运行5次。 first times it populating in the first row, but from next time onward its overriding the first row.. and not coming to second row
第一次在第一行中填充,但是从下一次开始,它会覆盖第一行,而不是第二行
Below is my code :-- 以下是我的代码:-
<!DOCTYPE html>
<html>
<head>
<script>
function start()
{
var ids = ["A", "B", "C", "D", "E"];
var id1s = [1,2,3,4,5];
var id2s = [6,7,8,9,10];
for (var i = 0; i < ids.length; i++){
var value=ids[i];
addrow(value);
addData(id1s[i], id2s[i]);
}
}
function addrow(value)
{
var test1 = value+'1';
var test2 = value+'2';
var TABLE = document.getElementById('tableId');
var BODY = TABLE.getElementsByTagName('tbody')[0];
var TR = document.createElement('tr');
var TD1 = document.createElement('td');
var TD2 = document.createElement('td');
var TD3 = document.createElement('td');
TD1.innerHTML = value;
TD2.innerHTML = "<input type='text' id='test1' value=''>";
TD3.innerHTML = "<input type='text' id='test2' value=''>";
TR.appendChild (TD1);
TR.appendChild (TD2);
TR.appendChild (TD3);
BODY.appendChild(TR);
}
function addData(num,num1)
{
alert("Showing assignment of values");
document.getElementById("test1").value=num;
document.getElementById("test2").value=num1;
}
</script>
</head>
<body>
<table id="tableId" border='1' cellspacing='0' cellpadding='0'>
<tr>
<td>Variable</td>
<td>Value1</td>
<td>Value2</td>
</tr>
<button type="button" onclick="start()">Display</button>
</table>
</body>
please suggest how to iterate through the text boxes created in 2nd and 3rd column 请提出如何遍历第二列和第三列中创建的文本框的建议
I modified your addrow and addData functions 我修改了您的addrow和addData函数
For addrow function You have to use the value inside test1 and test2 to form the input ids like this 对于addrow函数,您必须使用test1和test2内的值来形成这样的输入id
TD2.innerHTML ="<input type='text' id='"+ test1 + "' value=''>";
TD3.innerHTML ="<input type='text' id='"+ test2 + "' value=''>";
for addData function bring in the 'value' variable as a parameter and change the document.getElementById statements as 对于addData函数,请输入'value'变量作为参数,并将document.getElementById语句更改为
document.getElementById(value + "1").value=num;
document.getElementById(value + "2").value=num1;
Please check jsFiddle http://jsfiddle.net/TbGcD/1/ 请检查jsFiddle http://jsfiddle.net/TbGcD/1/
In my experience, something like this should provide decent performance 以我的经验,这样的事情应该可以提供不错的表现
<!DOCTYPE html>
<html>
<head>
<script>
function start()
{
var ids = ["A", "B", "C", "D", "E"];
var id1s = [1,2,3,4,5];
var id2s = [6,7,8,9,10];
var table= document.getElementById('tableId').getElementsByTagName('tbody')[0];
for (var i = 0; i < ids.length; i++){
alert("Showing assignment of values");
table.innerHTML+= '<tr><td>'+ids[i]+'</td><td>'+id1s[i]+'</td><td>'+id2s[i]+'</td></tr>';
}
}
</script>
</head>
<body>
<button type="button" onclick="start()">Display</button>
<table id="tableId" border='1' cellspacing='0' cellpadding='0'>
<tr>
<td>Variable</td>
<td>Value1</td>
<td>Value2</td>
</tr>
</table>
</body>
If you don't need to see each row assigned separately, I suggest doing something like this 如果您不需要查看每行分别分配的内容,建议您这样做
<!DOCTYPE html>
<html>
<head>
<script>
function start()
{
var ids = ["A", "B", "C", "D", "E"];
var id1s = [1,2,3,4,5];
var id2s = [6,7,8,9,10];
var table= document.getElementById('tableId').getElementsByTagName('tbody')[0];
var text='';
for (var i = 0; i < ids.length; i++){
text+='<tr><td>'+ids[i]+'</td><td>'+id1s[i]+'</td><td>'+id2s[i]+'</td></tr>';
}
table.innerHTML+= text;
text='';
}
</script>
</head>
<body>
<button type="button" onclick="start()">Display</button>
<table id="tableId" border='1' cellspacing='0' cellpadding='0'>
<tr>
<td>Variable</td>
<td>Value1</td>
<td>Value2</td>
</tr>
</table>
</body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.