How can I create a table using the input element?


Joined
Mar 25, 2022
Messages
1
Reaction score
0
Hey there,

I've just started learning javascript, so I excuse for an eventually stupid question in advance.
I want to create a programme, where users can create their own knitting-patterns.
Therefore, in my html-Document I created a form as follows:

<form>
<label for="h-stitches">Horizontal Stitches:</label>
<input type="number" min="0" id="h-stitches" name="h-stitches"><br><br>
<label for="v-stitches">Vertical Stitches:</label>
<input type="number" min="0" id="v-stitches" name="v-stitches"><br><br>
</form>


In Javascript, I started like this:


document.getElementById("v-stitches").addEventListener("change", function () {
let row = document.getElementById("h-stitches").value;
let col = document.getElementById("v-stitches").value;
let table = document.createElement('table');
for(let i=0; i<row; i++) {
let tr = document.createElement('tr');
for(let j=0; j<col; j++) {
let td = document.createElement('td');
td.innerHTML = " ";
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("Pattern-Table").appendChild(table);
});


This doesn't work and so far I haven't found the answer yet.
If there's anybody out there who can help me, I would be really glad.

Thank you so much.

Biwo
 
Last edited:
Ad

Advertisements

Joined
Mar 11, 2022
Messages
82
Reaction score
8
I don't see issues on ur code. Does the element "Pattern-Table" exists?

PLUS add something to your tablefields to see if they'll be created.

E.g.
td.innerHTML = "-";
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top