Assign Array values to Table Cells (Js)

Question

I'm trying to give each td with the class '.m' a value from the array.

i.e. the first cell is given first number from the array, the second cell is given the second number etc.

The problem is that all of the cells are being given the same value of '1'

Any help is much appreciated.

Here is what I've tried so far:

JsFiddle: https://jsfiddle.net/Fraser_M/8cs5tcav/2/

HTML:

<table>
 <tr>
  <td class='m'></td>
  <td class='m'></td>
  <td class='m'></td>
  <td class='m'></td>
  <td class='m'></td>
  <td class='m'></td>
 </tr>
 <tr>
  <td class='m'></td>
  <td class='m'></td>
  <td class='m'></td>
  <td class='m'></td>
  <td class='m'></td>
  <td class='m'></td>
 </tr>
</table>

JS:

$(function() {

 var myArray = [1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1];
 var myArrayLength = myArray.length;


 for (var i = 0; i < myArrayLength; i++) {
   $('.m').text(myArray[i]);
 }

});

user70585 · Accepted Answer · 2016-02-20 23:41:00Z

2

The problem is that $('.m') selects all of the elements with every iteration, so they'll all be set to the last element in the array.

I think this is what you were going for: https://jsfiddle.net/z9t4w7s3/1/

EDIT: code block from the fiddle:

$(function() {
  var myArray = [1,0,0,1,0,0,1,0,1,0,1,1];
  var myArrayLength = myArray.length;
  $('.m').each(function(i, element) {
    $(element).html(myArray[i]);
  });
});

edited Feb 20, 2016 at 23:41

answered Feb 20, 2016 at 23:35

user70585

1,4191 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guest271314 · Accepted Answer · 2016-02-20 23:38:35Z

1

Use .eq() to select element at index i within .m collection of elements within for loop

$(function() {
 // cache selector
 var m = $(".m");

 var myArray = [1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1];
 var myArrayLength = myArray.length;

 for (var i = 0; i < myArrayLength; i++) {
   m.eq(i).text(myArray[i]);
 }

});

answered Feb 20, 2016 at 23:38

guest271314

1

Collectives™ on Stack Overflow

Assign Array values to Table Cells (Js)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related