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

我试图将循环的的每个整数分配到输入元素的id属性中

我期待这样的输出 ==>

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

<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=“”；
对于（变量行=0；行<8；行++）{
文件。填写（“”）；
log（row+‘this is row’）//从0开始到7，这是有效的
for（变量col=0；col<3；col++）{
$（'.dataFromSpreadsheet'）.attr（'id'，行+'：'+col）；
document.write（newTable）；
console.log（col+‘this is column’）//从0到2开始工作
}
文件。写（“”）
}

您正在呼叫

$（'.dataFromSpreadsheet'）.attr（'id'，row+'：'+col）多次，它所做的事情覆盖了所有输入的id，因此得到7:2，因为此时循环停止覆盖

您需要循环遍历每个
.datafromseadsheet
，并添加单个项目的id

试着这样做：


for（变量行=0；行<8；行++）{
文件。填写（“”）；
log（row+‘this is row’）//从0开始到7，这是有效的
for（变量col=0；col<3；col++）{
var newTable=“”；
document.write（newTable）；
console.log（col+‘this is column’）//从0到2开始工作
}
文件。写（“”）
}
您正在呼叫

$（'.dataFromSpreadsheet'）.attr（'id'，row+'：'+col）多次，它所做的事情覆盖了所有输入的id，因此得到7:2，因为此时循环停止覆盖

您需要循环遍历每个
.datafromseadsheet
，并添加单个项目的id

试着这样做：


for（变量行=0；行<8；行++）{
文件。填写（“”）；
log（row+‘this is row’）//从0开始到7，这是有效的
for（变量col=0；col<3；col++）{
var newTable=“”；
document.write（newTable）；
console.log（col+‘this is column’）//从0到2开始工作
}
文件。写（“”）
}

对于（变量行=0；行<8；行++）{
文件。填写（“”）；
log（row+‘this is row’）//从0开始到7，这是有效的
for（变量col=0；col<3；col++）{
变量id=行+'：'+列；
var newTable=“”；
document.write（newTable）；
console.log（col+‘this is column’）//从0到2开始工作
}
文件。写（“”）
}

对于（变量行=0；行<8；行++）{
文件。填写（“”）；
log（row+‘this is row’）//从0开始到7，这是有效的
for（变量col=0；col<3；col++）{
变量id=行+'：'+列；
var newTable=“”；
document.write（newTable）；
console.log（col+‘this is column’）//从0到2开始工作
}
文件。写（“”）
}
实现的问题是，
$（'.datafromseadsheet'）.attr（'id'，row+'：'+col）覆盖先前创建的元素的
id
属性

我建议您使用和使用方法来创建元素，即
append（）
将元素添加到DOM中，并使用方法
.css（）
，
.val（）
来操作它们


//创建DIV
var div=$（''）
//将CSS规则添加到上面创建的div
div.css（“清除”、“两个”）
对于（变量行=0；行<8；行++）{
for（变量col=0；col<3；col++）{
//使用属性创建输入
变量输入=$（''{
“类”：“dataFromSpreadsheet”，
“类型”：“文本”，
“id”：行+'：'+列
})
.css（“浮动”、“左”）
.val（行+'：'+列）；
//将其附加到DIV
div.append（输入）；
}
}
//将主div追加到DOM
$（“#容器”）.append（div）
实现的问题是，
$（'.datafromseadsheet'）.attr（'id'，row+'：'+col）覆盖先前创建的元素的
id
属性

我建议您使用和使用方法来创建元素，即
append（）
将元素添加到DOM中，并使用方法
.css（）
，
.val（）
来操作它们


//创建DIV
var div=$（''）
//将CSS规则添加到上面创建的div
div.css（“清除”、“两个”）
对于（变量行=0；行<8；行++）{
for（变量col=0；col<3；col++）{
//使用属性创建输入
变量输入=$（''{
“类”：“dataFromSpreadsheet”，
“类型”：“文本”，
“id”：行+'：'+列
})
.css（“浮动”、“左”）
.val（行+'：'+列）；
//将其附加到DIV
div.append（输入）；
}
}
//将主div追加到DOM
$（“#容器”）.append（div）

第一个循环一直执行到计数为7。但在执行内部循环之前，第一个循环完成了它的事务，因为document.write需要一些时间。应该使用递归fn来解决这个问题issue@Satpal我正在使用
document.write
在文档上创建新元素。你的意思是我应该在jQuery中使用其他方法，因为我在代码中使用jQuery？请注意，你不应该使用数字作为id-尽管现在在HTML5中使用数字是有效的-CSS选择器可能不会像预期的那样以元素为目标。您应该使用现有的使用名称前缀和下划线或连字符分隔的做法-例如：$（'.dataFromSpreadsheet'）.attr（'id'，'input_'+行+''列）；或$（'.dataFromSpreadsheet'）.attr（'id'，'input-'+行+'-'+列）；-这有一个额外的优点，就是能够将可预测的字符分割到目标元素。第一个循环执行到计数为7为止。但在执行内部循环之前，第一个循环完成了它的事务，因为document.write需要一些时间。应该使用递归fn来解决这个问题issue@Satpal我正在使用
document.write
在文档上创建新元素。你是说我应该在jQuery中使用其他方法，因为我在代码中使用jQuery
<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>

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