将 for 循环中的每个整数分配给输入 id 属性[for 循环工作正常]

Question

我正在尝试将for 循环的每个整数分配给输入元素的 id 属性。

我期待这样的输出 ===>

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

但是，我现在的输出是这样的===>

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

我不明白为什么输出是id = 7：2，尽管两个for循环都可以正常工作。

提前谢谢你！

Answer 1

你正在打电话

多次$('.dataFromSpreadsheet').attr('id', row +':'+col);，它的作用会覆盖所有输入的id，因此您可以获得7：2，因为那是循环停止覆盖的时候

您需要遍历每个.dataFromSpreadsheet并为单个项目添加 id

尝试这样的事情：

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>

Answer 2

实现的问题在于$('.dataFromSpreadsheet').attr('id', row +':'+col);覆盖了以前创建的元素的id属性。

我建议您使用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>

Answer 3

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