Después del séptimo día, se debe agregar una nueva fila de tabla. Y si el usuario agrega un nuevo valor, debe agregarse td que se agregó recientemente. El punto frustrante es que no sé cómo manipular los DOM para esta situación.
const workInput = document.querySelector('#workInput') const workForm = document.querySelector('#workForm') const workBtn = document.querySelector('#workButton') const tableTd = document.querySelectorAll('table tbody tr td') const tableTr = document.querySelectorAll('table tbody tr') workForm.addEventListener('submit', (e)=>{ tableTr.forEach(function(tr){ tr.innerHTML+= ` <td>${workInput.value}</td> ` }) e.preventDefault() }) table{ margin: 1rem auto; width: 1000px; background-color: rgb(54, 180, 238); } tr{ background-color: aliceblue; } tr:nth-child(odd){ background-color: antiquewhite; } td{ text-align: center; } <div> <form autocomplete="off" action="#" id="workForm"> <input type="text" id="workInput"> <button id="workButton">Add</button> </form> <table> <thead> <tr> <th>First day</th> <th>Second day</th> <th>Third day</th> <th>Fourth day</th> <th>Fifth day</th> <th>Sixth day</th> <th>Seventh day</th> </tr> </thead> <tbody> <tr></tr> </tbody> </table> </div>Intenté muchas maneras para eso, no pude encontrar el método adecuado. Muchos algoritmos forEach, manipulación DOM, pero aún no tengo idea. ¿Alguna idea para esa situación? Por cierto, necesito crear con vanilla js, no con ningún complemento o Jquery. Espero que todo esté claro, si no solo comenta para obtener más detalles, por favor. Gracias por todas las respuestas.
// i added let days = 7; let workCount = 0; const workInput = document.querySelector("#workInput"); const workForm = document.querySelector("#workForm"); const workBtn = document.querySelector("#workButton"); const tableTd = document.querySelectorAll("table tbody tr td"); // I changed it from const to let and querySelectorAll all to querySelectorA let tableTr = document.querySelector("table tbody tr"); const tableBody = document.querySelector("table tbody"); workForm.addEventListener("submit", (e) => { e.preventDefault(); if (workCount < days) { tableTr.innerHTML += `<td>${workInput.value}</td>`; workCount++; } if (workCount === days) { workCount = 0; let newRow = document.createElement("tr"); tableTr = newRow; tableBody.appendChild(newRow); } });Puede usar childElementCount para verificar la cantidad de elementos en una fila y usar appendChild para agregar una nueva fila.
<div> <form autocomplete="off" id="workForm"> <input type="text" id="workInput" /> <button id="workButton" onclick="onSubmitWork()">Add</button> </form> <table> <thead> <tr> <th>First day</th> <th>Second day</th> <th>Third day</th> <th>Fourth day</th> <th>Fifth day</th> <th>Sixth day</th> <th>Seventh day</th> </tr> </thead> <tbody id="tbody"> <tr class="row0"></tr> </tbody> </table> </div> // handle submit button function onSubmitWork() { // Get input element by id const workInput = document.getElementById('workInput'); // Get tbody element const tbody = document.getElementById('tbody'); // Get total rows "tr" const nbRows = tbody.childElementCount; // Get cuurent row by css class name const currentRow = document.querySelector(`.row${nbRows - 1}`); console.log(currentRow.childElementCount); // Check the number of td we have in the current row if (currentRow.childElementCount <= 5) { addWork(workInput.value, nbRows); } else { addRow(nbRows); addWork(workInput.value, nbRows); } } // Add a new "td" function addWork(inputValue, nbRows) { let node = document.createElement('TD'); const text = document.createTextNode(inputValue); node.appendChild(text); const row = document.querySelector(`.row${nbRows - 1}`); row.appendChild(node); } // Add a new row "tr" function addRow(nbRows) { let row = document.createElement('TR'); // Create a new css clss name for the new row const rowClass = `row${nbRows}`; row.classList.add(rowClass); document.getElementById('tbody').appendChild(row); }aquí hay una demostración