How to create table with javascript

Question

I would like to create table with javascript. I would like to ask user, for width and height of a table (1 cell is 1 unit). Then when table is created, if user clicks in to one of the cell, color changes. I have so code written, but I am pretty much stuck.

HTML CODE:

    <script src="script.js"></script>
    <style>
        #chessboard{border: 1px solid black; border-collapse: collapse}
        td {width: 40px; height: 40px}

        tr:nth-child(odd) td:nth-child(even) {background: black}
        tr:nth-child(even) td:nth-child(odd) {background: black}
    </style>
</head>
<body onload="myFunction()">
    <div>
        <table id="chessboard">

        </table>
    </div>
</body>

JAVASCRIPT:

   var width = parseInt(prompt("Put width", "here"));
   var height = parseInt(prompt("Put height", "here"));

      function myFunction()
      {
         var tabel = document.getElementById("chessboard");

        for (i = 0; i < height; i++){
        var row = tabel.insertRow(i);
        };

        for (j = 0; j < width; j++){
        var celica = document.getElementByTagName("tr").rows[j];
        var x = celica.insertCell(j);
        };

        }

You're not appending anything to the table.

Cas Bloem
– Cas Bloem

2015-01-06 09:51:48 +00:00
Commented Jan 6, 2015 at 9:51 — Cas Bloem
– Cas Bloem, Commented Jan 6, 2015 at 9:51

Rajit · Accepted Answer · 2015-01-06 09:55:18Z

1

Rather than looping over the columns you want in your row separately, try nesting the for loop. It's much easier and means you don't have to clumsily look up the row again.

FYI, there is no getElementByTagName, only getElementsByTagName.

  var width = parseInt(prompt("Put width", "here"));
  var height = parseInt(prompt("Put height", "here"));

  function myFunction() {
    var table = document.getElementById("chessboard");

    for (var i = 0; i < height; i++) {
      var row = table.insertRow(i);
      
      for (var j = 0; j < width; j++) {
        row.insertCell(j);
      }
    };

  }

<head>
  <script src="script.js"></script>
  <style>
    #chessboard {
      border: 1px solid black;
      border-collapse: collapse
    }
    td {
      width: 40px;
      height: 40px
    }
    tr:nth-child(odd) td:nth-child(even) {
      background: black
    }
    tr:nth-child(even) td:nth-child(odd) {
      background: black
    }
  </style>
</head>

<body onload="myFunction()">
  <div>
    <table id="chessboard">

    </table>
  </div>
</body>

answered Jan 6, 2015 at 9:55

Rajit

8085 silver badges9 bronze badges

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

2 Comments

mihcc Over a year ago

hmm i see, but i stil have problems with onClick event. How can change each cell color to red onClick?

Rajit Over a year ago

Could you post that as a new question?

Collectives™ on Stack Overflow

How to create table with javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related