child not appearing

this code is supposed to create new table rows with 2 new columns in the new rows. but it is not working. please help <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> table{ width: auto; align-items: center; } table, th, td{ border:1px solid #000 } </style> <script> window.onload = function () { function tableCrate(inputID, numberOfRows) { var tableBody = document.getElementById('model'); tableCrate('youssef', 2); for (let x = 0; x < numberOfRows; x++) { var newTableRow = document.createElement('tr'); tableBody.appendChild(newTableRow); for (var g = 0; g < numberOfRows*2; g++){ var newTableData = document.createElement('td'); var newInput = document.createElement('input'); newInput.setAttribute('id', inputID); newTableData.appendChild(newInput); } } } } </script> <title>modeling-data</title> </head> <body> <table> <thead> <tr> <th>x</th> <th>y</th> </tr> </thead> <tbody id="model"> </tbody> </table> </body> </html>

html javascript html5 dom js purejs

18th Sep 2019, 11:37 AM

Youssef Hammad

1 Answer

+ 1

You have a few issues. Firstly, you cannot call your 'tableCrate' function from within its own definition. The line tableCrate('youssef', 2); needs to be moved outside. Secondly, you forgot to append your newTableData to your newTableRow. Thirdly, you are trying to set the same id to multiple elements which you are not allowed to do. If you want to do this, use class instead. Here's what I've done: https://code.sololearn.com/W63b812eLcoR/?ref=app

18th Sep 2019, 3:05 PM

Russ