var students = [ ["test", "test", "test"], ["test", "test", "test"] ]; students.sort(); function display() { for (i = 1; i < students.length + 1; i++) { document.write("<tr>"); document.write("<td>" + (i) + "</td>"); document.write("<td>" + students[i - 1][0] + "</td>"); document.write("<td>" + students[i - 1][1] + "</td>"); document.write("<td>" + students[i - 1][2] + "</td>"); document.write("<td><input type='number' class='form-control' id='quiz" + i + "' ></td>"); document.write("<td><input type='number' class='form-control' id='reqt" + i + "'></td>"); document.write("<td><input type='number' class='form-control' id='exam" + i + "'></td>"); document.write("<td><input type='number' class='form-control' id='pg" + i + "' readonly></td>"); document.write("</tr>"); } } function AddData() { var AddName; var AddCourse; var AddBDay; var Data; AddName = document.getElementById('Addname').value; AddCourse = document.getElementById('AddCourse').value; AddBDay = document.getElementById('AddBDay').value; if (AddName != "" && AddCourse != "" && AddBDay != "") { Data = [AddName, AddCourse, AddBDay]; students.push(Data); console.log(students); display(); } else { alert("Invalid Input"); } }No ha publicado ningún HTML, pero suponiendo que tiene un <table id="x"> o <tbody id="x"> , modifique la función de display de la siguiente manera:
function display() { let html = ''; students.map((item, i) => { html += "<tr>"; html += "<td>" + (i+1) + "</td>"; html += "<td>" + item[0] + "</td>"; html += "<td>" + item[1] + "</td>"; html += "<td>" + item[2] + "</td>"; html += "<td><input type='number' class='form-control' id='quiz" + i + "' ></td>"; html += "<td><input type='number' class='form-control' id='reqt" + i + "'></td>"; html += "<td><input type='number' class='form-control' id='exam" + i + "'></td>"; html += "<td><input type='number' class='form-control' id='pg" + i + "' readonly></td>"; html += "</tr>"; }); document.getElementById("x").innerHTML = html; } Además, document.write rara vez o nunca se usa. Más aquí .
element.innerHTML generalmente se usa cuando desea realizar alguna manipulación DOM como resultado de una llamada API o cualquier otro evento, como en su caso.
document.write es muy, muy de la vieja escuela y ya no se usa muy raramente por muchas razones .
Puede crear una variable de cadena a la que luego puede agregar (concatenar) nuevas cadenas, o puede usar métodos más modernos como en el ejemplo a continuación, que usa el map para iterar sobre la matriz para crear una nueva matriz de cadenas y luego join esa matriz en una cadena HTML.
const students = [ ["test", "test", "test"], ["test", "test", "test"] ]; function getHtml(students) { return students.map(arr => { return ` <tr> <td>${arr[0]}</td> <td>${arr[1]}</td> <td>${arr[2]}</td> </tr> ` }).join(''); } const table = document.querySelector('table'); table.innerHTML = getHtml(students); <table></table>