Creating a table using JavaScript

Question

I am new to front-end web development and right now I am working on a test task to create a table using javascript.Here is my html file:

<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<link rel="stylesheet" href="styles.css"> </head> <body>
<h1>Lab: Pixel Art Maker</h1>

<h2>Choose Grid Size</h2>
<form id="sizePicker">
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="1">
    Grid Width:
    <input type="number" id="inputWeight" name="width" min="1" value="1">
    <input type="submit" onclick="makeGrid()">
</form>

<h2>Pick A Color</h2>
<input type="color" id="colorPicker">

<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>

<script src="designs.js"></script> </body> </html>

And my javascript file:

function makeGrid() {


var rows=inputHeight; var cols=inputWeight; //Referencw for the body var body=document.getElementsbyTagName("body")[0];

//create a table element and a <tbody> element var table1=document.createElement("table"); var tableBody=document.createElement("tbody");

//creating cells for (var i=0;i<rows;i++){  //creating a table row  var R=document.createElement("tr");     for(var j=0;j<cols;j++){        //create a table data element       var C=document.createElement("td");         R.appendchild(C);


    }   //adding the row to the end of the table body
     tableBody.appendChild(R); } //putting the <tbody> in the <table> table1.appendChild(tableBody); //appending <table> into <body> body.appendChild(table1);

}

I am supposed to get user input of rows and columns via submit button and generate a table according to that specification.So far my attmepts are unsuccessful,more precisely when I hit submit,nothing happens and the values revert back to "1".

I would really appreciate your guidance and feedback.

Simply assigning an input an id is not enough, you need to reference the DOM object's value by using document.getElementById("inputHeight").value — Katajun
– Katajun, Commented Feb 1, 2018 at 17:08
var rows = inputHeight; <<< do you notice anything strange here? — Roko C. Buljan
– Roko C. Buljan, Commented Feb 1, 2018 at 17:12
@Roko C.Buljan: as I said I am new to front-end development. — Aayman Khalid
– Aayman Khalid, Commented Feb 1, 2018 at 17:16

Roko C. Buljan · Accepted Answer · 2018-02-01 17:39:28Z

You don't need a <form>. There's nothing to submit to.
Use document.getElementById
You already have a <table id> in HTML. Reference it!
You don't need therefore a document.body reference.
To retrieve the integer use parseInt( number, radix ) since input value is a String
Clear your table from existing content before appending new stuff.
Use addEventListener(EventName, callback) instead of inline JavaScript (onclick)
Weight is not Width!

function makeGrid() {

  var ELTable       = document.getElementById("pixelCanvas"); // You already have it!
  var ELInputHeight = document.getElementById("inputHeight");
  var ELInputWidth  = document.getElementById("inputWidth");
  var rows = parseInt(ELInputHeight.value, 10);
  var cols = parseInt(ELInputWidth.value, 10);  // Weight? you mean Width!

  ELTable.innerHTML = ""; // Empty table before inserting new stuff

  var tbody = document.createElement("tbody");
  
  for (var i = 0; i < rows; i++) {           // N rows...
    var R = document.createElement("tr");    // Make row.
    for (var j = 0; j < cols; j++) {         // N cells...
      var C = document.createElement("td");  // Make cell.
      R.appendChild(C);                      // Insert cell into row.
    }
    tbody.appendChild(R);                    // Insert row into tbody
  }
  
  ELTable.appendChild(tbody);                // Insert tbody into table
}

document.getElementById("makeGrid").addEventListener("click", makeGrid);

td { padding:10px; background:#000; }

Height: <input type="number" id="inputHeight" min="1" value="1"> 
Width: <input type="number" id="inputWidth" min="1" value="1">
<button id="makeGrid">MAKE</button>
<br>
Color: <input type="color" id="colorPicker">
<table id="pixelCanvas"></table>

Petrashka Siarhei · Accepted Answer · 2018-02-01 17:40:01Z

I create function for generate body of table, and listener for butto

function createTableBody(height, width) {
    let tr = document.createElement('tr');
    let td = document.createElement('td');
    let docFr = new DocumentFragment();
    for (let i = 0; i < width; i++) {
        tr.append(td.cloneNode());
    }
    for (let i = 0; i < height; i++) {
        docFr.append(tr.cloneNode(true));
    }
    return docFr;

}
let table = document.getElementById('pixelCanvas');
let createTableButton = document.getElementById('createTableButton');
let inputHeight = document.getElementById('inputHeight');

let inputWidth = document.getElementById('inputWeight');
createTableButton.addEventListener('click', () => {
    let parentTable = table.parentNode;
    let tableClone = table.cloneNode();
    parentTable.replaceChild(tableClone, table);//clear old table
    table = tableClone; 
    tableClone.append(createTableBody(inputHeight.value, inputWidth.value));
    // if you need , you can add ajax request 
    console.log(table)
});

<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<link rel="stylesheet" href="styles.css"> </head> <body>
<h1>Lab: Pixel Art Maker</h1>

<h2>Choose Grid Size</h2>
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="1">
    Grid Width:
    <input type="number" id="inputWeight" name="width" min="1" value="1">
    <input type="button"  id="createTableButton">
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">

<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>
 </body> </html>

If you need send data to server, you can use ajax, and i replace your submit to button, remove form.

zxbEPREF · Accepted Answer · 2018-02-01 17:40:23Z

Try this:

<form id="form-grid" method="post" onsubmit="makeGrid()">
    <h2 id="grid-size">Choose Grid Size</h2>
    <label for="inputHeight">Grid height:</label>
    <input type="number" id="inputHeight" name="height" min="1" value="1" aria-describedby="grid-size" />

    <label for="inputWeight">Grid width:</label>
    <input type="number" id="inputWeight" name="width" min="1" value="1" aria-describedby="grid-size" />

    <h2>Pick a color</h2>
    <label for="colorPicker">Color:</label>
    <input type="color" id="colorPicker" name="color" />

    <input type="submit" value="Make Grid" />
</form>

<div id="pixelCanvas"></div>

Do note the addition of explicit label's here. These are important for accessibility!

I've added a submit handler to the form, and removed it from the button. I find it's a bit cleaner, but your approach would ultimately work too.

Then in your designs.js file, you might have:

function makeGrid(event) {
    event.preventDefault(); // prevents the form from submitting

    var form = document.querySelector('#form-grid');
    var rows = form.querySelector('#inputHeight').value;
    var cols = form.querySelector('#inputWeight').value;
    var wrapper = document.querySelector('#pixelCanvas');

    var table = document.createElement('table');

    for (var r = 0; r < rows; r++) {
        var tr = table.insertRow();
        for (var c = 0; c < cols; c++) {
            var td = tr.insertCell();
        }
    }

    wrapper.appendChild(table);
}

A few reminders:

Use label to associate a form field with it's visible label. This is necessary for assistive technology such as screen readers.
Consider a fieldset to group all of the options, increasing its accessibility.

Good luck!

James Long · Accepted Answer · 2018-02-02 09:29:07Z

0

As @Katamari said, it looks like you're not properly accessing the elements and getting their values.

To access an element, you can use document.querySelector and pass in a CSS selector.

var rowInput = document.querySelector("#inputHeight");
var colInput = document.querySelector("#inputWidth");

Since you have assigned IDs, you could use document.getElementById

var rowInput = document.getElementById("inputHeight");
var colInput = document.getElementById("inputWidth");

Either way, you'll get an element or null if the element can't be found. Once you have the element, just get the value property to get the user results.

var rows = rowInput.value;
var cols = colInput.value;

If you want to avoid error that could be caused by not finding the element, you can check for the element before referencing the value.

var rows = 1;
var cols = 1;

if (rowInput) {
    rows = rowInput.value;
}

if (colInput) {
    cols = colInput.value;
}

This can be converted into a single line using a tenary operator

var rows = rowInput
    ? rowInput.value
    : 1;
var cols = colInput
    ? colInput.value
    : 1;

edited Feb 2, 2018 at 9:29

answered Feb 1, 2018 at 17:41

James Long

4,7581 gold badge22 silver badges31 bronze badges

2 Comments

zxbEPREF Over a year ago

I disagree with the use of ternary operators here. You wouldn't have a table with zero rows or zero cells. The OP is defaulting to 1, which is best.

James Long Over a year ago

That's a fair point, I missed that. That would also work against the logical operators - I'll edit the answer

Collectives™ on Stack Overflow

Creating a table using JavaScript

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related