时间戳

首页 > 解决方案 > 将 for 循环中的每个整数分配给输入 id 属性[for 循环工作正常]

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

问题描述

我正在尝试将for loop的每个整数分配给输入元素的 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 循环都可以正常工作。

先感谢您！

标签： javascriptjqueryhtmlhtml-table

解决方案

你在打电话

$('.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>

推荐阅读