Назначение каждого целого числа в цикле для атрибута ввода id [цикл работает нормально]

Question

Я пытаюсь назначить каждое целое число для цикла в атрибуте 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 , хотя оба цикла работают нормально.

Заранее спасибо!

Answer 1

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

Вы звоните

$('.dataFromSpreadsheet').attr('id', row +':'+col); несколько раз, и то, что он делает, перекрывает идентификатор для всех входов, так что вы получаете 7: 2, потому что это когда петли прекращают перебрасывать

Вам нужно перебрать каждый .dataFromSpreadsheet и добавить идентификатор для одного элемента

. Попробуйте что-то вроде этого:

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>