Assigning each integer in for loop to input id attribute[for loop works fine]

Question

I am trying to assign each integer of for loop , into id attribute of the input element.

I am expecting an output like this ===>

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

However, my output is like this now ===>

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

I do not understand why the output is id = 7 : 2 , although both for loop works fine.

Thank you in advance!

Answer 1

You are calling

$('.dataFromSpreadsheet').attr('id', row +':'+col); multiple times and what it does it overites the id for all the inputs ,so you get 7:2 because that is when the loops stop overiding

You need to loop over each .dataFromSpreadsheet and add the id for a single item

try something like this:

 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

Problem with your implementation is that $('.dataFromSpreadsheet').attr('id', row +':'+col); overwrites the id attribute of previously created element.

I would recommend you to create element using jQuery(html, attributes) and use methods ie append() to add elements to DOM and methods .css() , .val() to manipulate them.

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