How can I Use a javascript for loop to create a table with multiple rows?

Question

I want to make a table of colors with eight rows using a javascript for loop. I did this with php and mysql but I can't seem to figure out how to output the and tags to create the distinct rows. So far this is what I have (The table has an id="colorpicker"):

 <script type="text/javascript">

 var colors = ['000033', '000066', '000099', '0000CC', '0000FF', '003300',    '003333', '003366', '003399', '0033CC', '0033FF', '006600', '006633', '006666', '006699', '0066CC'];
 var i = 0;
 var len = colors.length;
 var colorpicker = "";
 var a = colors.indexOf('i');

 for (i = 0; i < len; i++) {

colorpicker += "<tr><td style='color:#"+colors[i]+"'>"+colors[i] +"</td>  </tr>";
}

document.getElementById("colorpicker").innerHTML = colorpicker;

</script>

What I think I need to do is determine the index of the colors and then use modular division to determine whether the index % 8 === 0. This is what I tried that didn't work:

 var colors = ['000033', '000066', '000099', '0000CC', '0000FF', '003300',       '003333', '003366', '003399', '0033CC', '0033FF', '006600', '006633', '006666', '006699', '0066CC'];
  var i = 0;
  var len = colors.length;
  var colorpicker = "";
  var a = colors.indexOf('000033');
 var b = colors.indexOf('003399');

  for (i = 0; i < len; i++) {

    if(a % 8 === 0){

        // begin row
            colorpicker += "<tr><td style='color:#"+colors[i]+"'>"+colors[i] +"</td>";
    }else if((b) % 8 === 0){
        // end row
            colorpicker += "<td style='color:#"+colors[i]+"'>"+colors[i] +"</td></tr>"
    }else{
        // midle of row
        colorpicker += "<td style='color:#"+colors[i]+"'>"+colors[i] +"</td>  ";
    }


}

document.getElementById("colorpicker").innerHTML = colorpicker;

The above will still result in a new row for each color. Any help will be greatly appreciated.

Almond · Accepted Answer · 2016-07-26 21:09:18Z

2

https://jsfiddle.net/ozhxzoph/

Is that what you meant to do? If so, you need to change "color" to "background-color".

Change this:

colorpicker += "<tr><td style='color:#"+colors[i]+"'>"+colors[i] +"</td>  </tr>";
}

To this:

colorpicker += "<tr><td style='background-color:#"+colors[i]+"'>"+colors[i] +"</td>  </tr>";
}

OR do you mean you want something like this? Where its a sort of grid of colors? The only difference here being that these are columns of 8, as opposed to rows of 8 which you seemed to be asking for.

https://jsfiddle.net/ozhxzoph/1/

Double Edit. Here is the solution for having 8 rows instead of 8 columns. The code has changed slightly more here though. Was a fun problem. :)

https://jsfiddle.net/ozhxzoph/6/

Hope this helps.

edited Jul 26, 2016 at 21:09

answered Jul 26, 2016 at 18:24

Almond

1681 silver badge8 bronze badges

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

3 Comments

Derreck Over a year ago

Yes I did mean background color now that I'm applying it to table cells. But I still only get one row for each color. I really want to get one row for eight colors and then start a new row.

Derreck Over a year ago

Thank You Almond. That is exactly what I needed.

Almond Over a year ago

I edited my answer to correctly answer your original question of having 8 columns rather than 8 rows. Not sure if that helps you anymore. Though it was a fun problem to solve. Either way, cheers :)

Collectives™ on Stack Overflow

How can I Use a javascript for loop to create a table with multiple rows?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related