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

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

Answer 3

实施中的问题是$('.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>

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

3 个答案: