[英]Assigning each integer in for loop to input id attribute[for loop works fine]
I am trying to assign each integer of for loop , into id attribute of the input element. 我试图将for循环的每个整数分配给输入元素的id属性。
I am expecting an output like this ===> 我期望这样的输出===>
<div style="clear:both">
<input class="dataFromSpreadsheet" type="text" style="float:left" id="0:0" value="">
<input class="dataFromSpreadsheet" type="text" style="float:left" id="0:1" value="">
<input class="dataFromSpreadsheet" type="text" style="float:left" id="0:2" value="">
</div>
However, my output is like this now ===> 但是,我的输出现在像这样===>
<div style="clear:both">
<input class="dataFromSpreadsheet" type="text" style="float:left" id="7:2" value="">
<input class="dataFromSpreadsheet" type="text" style="float:left" id="7:2" value="">
<input class="dataFromSpreadsheet" type="text" style="float:left" id="7:2" value="">
</div>
var newTable = "<input class = 'dataFromSpreadsheet' type = 'text' style = 'float:left' id = '' value = ''>"; for (var row = 0; row < 8; row++) { document.write("<div style = 'clear:both'>"); console.log(row + 'this is row') // this works, starting from 0 to 7 for (var col = 0; col < 3; col++) { $('.dataFromSpreadsheet').attr('id', row + ':' + col); document.write(newTable); console.log(col + 'this is column') // this works, starting from 0 to 2 } document.write("</div>") }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I do not understand why the output is id = 7 : 2 , although both for loop works fine. 我不明白为什么输出是id = 7:2 ,尽管两个for循环都可以正常工作。
Thank you in advance! 先感谢您!
You are calling 你在打电话
$('.dataFromSpreadsheet').attr('id', row +':'+col);
multiple times and what it does it overites the id for all the inputs ,so you get 7:2 because that is when the loops stop overiding 多次,它会覆盖所有输入的id,所以您得到7:2,因为那是循环停止覆盖的时间
You need to loop over each .dataFromSpreadsheet
and add the id for a single item 您需要遍历每个
.dataFromSpreadsheet
并添加单个项目的ID
try something like this: 尝试这样的事情:
for (var row = 0; row < 8; row++) { document.write("<div style = 'clear:both'>"); console.log(row + 'this is row') // this works, starting from 0 to 7 for (var col = 0; col < 3; col++) { var newTable = "<input class = 'dataFromSpreadsheet' type = 'text' style = 'float:left' id = '"+ row + ':' + col+"' value = ''>"; document.write(newTable); console.log(col + 'this is column') // this works, starting from 0 to 2 } document.write("</div>") }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
for (var row = 0; row < 8; row++){
document.write("<div style = 'clear:both'>");
console.log(row + 'this is row') // this works, starting from 0 to 7
for (var col = 0; col < 3; col++){
var id = row +':'+col;
var newTable = "<input class = 'dataFromSpreadsheet' type = 'text' style = 'float:left' id = "+id+" value = ''>";
document.write(newTable);
console.log(col + 'this is column') // this works, starting from 0 to 2
}
document.write("</div>")
}
</script>
Problem with your implementation is that $('.dataFromSpreadsheet').attr('id', row +':'+col);
您的实现的问题是
$('.dataFromSpreadsheet').attr('id', row +':'+col);
overwrites the id
attribute of previously created element. 覆盖先前创建的元素的
id
属性。
I would recommend you to create element using jQuery(html, attributes)
and use methods ie append()
to add elements to DOM and methods .css()
, .val()
to manipulate them. 我建议您使用
jQuery(html, attributes)
创建元素jQuery(html, attributes)
并使用方法append()
将元素添加到DOM中,并使用方法.css()
和.val()
进行操作。
//Create DIV var div = $('<div>') //Add CSS rule to above created div div.css("clear", "both") for (var row = 0; row < 8; row++) { for (var col = 0; col < 3; col++) { //Create INPUT with attributes var input = $('<input>', { "class": "dataFromSpreadsheet", "type": "text", "id": row + ':' + col }) .css("float", "left") .val(row + ':' + col); //Append It to DIV div.append(input); } } //Append the main div to DOM $('#container').append(div);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.