The button that sets the array

Question

Created a function that creates a table and passed it an array, then created 2 inputs and a button. How to set an array by writing its input values after which clicking on the button worked.

function createTable(tableData) { var table = document.createElement('table'); var tableBody = document.createElement('tbody'); tableData.forEach(function(rowData) { var row = document.createElement('tr'); rowData.forEach(function(cellData) { var cell = document.createElement('td'); cell.appendChild(document.createTextNode(cellData)); row.appendChild(cell); }); tableBody.appendChild(row); }); table.appendChild(tableBody); document.body.appendChild(table); } var a = [["0", "0", "0",], ["0", ,"0", "0"]]; createTable(a);

  body { margin-top:10%; margin-left:40%; } th,td { width: 50px; border: 1px solid red; font-size:x-large; color:white; } tbody { background-color:blue; } input{ width:20px; height:20px; }

 <input type="text" class="col1"> <input type="text" class="col2"> <button class="btn">Go</button>

Ok, I entered in steps 1 and 2, pressed the button - what should happen?
so I wanted to ask, you need the button to respond and draw me an array
Well, for example, I enter the value of 4 and 5 in the table. The table should change and become like 4 rows and 5 columns, something like this

Hedgehog hedgehog 36 6 · Accepted Answer · 2017-01-17T12:46:31

You should set the onclick attribute on the button tag, and in it specify the function you want to call on the button.

 function createTable(tableData) { var table = document.createElement('table'); var tableBody = document.createElement('tbody'); tableData.forEach(function(rowData) { var row = document.createElement('tr'); rowData.forEach(function(cellData) { var cell = document.createElement('td'); cell.appendChild(document.createTextNode(cellData)); row.appendChild(cell); }); tableBody.appendChild(row); }); table.appendChild(tableBody); document.body.appendChild(table); }

 body { margin-top:10%; margin-left:40%; } th,td { width: 50px; border: 1px solid red; font-size:x-large; color:white; } tbody { background-color:blue; } input{ width:20px; height:20px; }

 <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <input type="text" class="col1"> <input type="text" class="col2"> <button class="btn" onclick='createTable([["0", "0", "0",], ["0", ,"0", "0"]])'>Go</button> </body> </html>

Dear, stop posting low-quality answers from several Plz accounts.
@ stack-it, and you poke at the snippet and see) Well, the message was addressed to the author, because the person is suspiciously similar to his twinkle (I can’t say for sure until Nicholas did not come =)) published some low-quality js answers ( regarding the rest - the rules).
@ stack-it, well, because the table is hard-coded, it just tells how to hang up the handler per click (and in a bad way), and the rest of the code is from the question.

br3t br3t 3,659 3 eleven 24 · Answer 2 · 2017-01-17T14:19:51

Something like this

 document.querySelector(".btn").addEventListener("click", function() { var rows = +document.querySelector(".col1").value; var cols = +document.querySelector(".col2").value; var row_arr = []; var col_arr = []; for (var i = 0; i < rows; i++) { var col_arr = []; for (var j = 0; j < cols; j++) { col_arr.push(0); // содержимое ячейки } row_arr.push(col_arr); } createTable(row_arr); });

It adds one table, it’s just that your function doesn’t delete all previous tables, because how many times you click - so many tables will be obtained (+ one).

The button that sets the array

2 answers 2

More articles: