After seventh day, new table row should be added. And if the user add new value it should be added td which added recently. The frustrating point is, I don't know how to manipulate DOM's for this situation.
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>
I tried many ways for that, couldn't find properly method. Many forEach algorithms, DOM manipulation, but still I have no idea. Any idea for that situation? Btw, I need to create with vanilla js, not any plugin, or Jquery. Hope, everything is clear, if not just comment for more details, please. Thanks for all responses.
// 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);
}
});
You can use childElementCount to check the number of elements in a row and use appendChild to add a new row.
<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);
}
here is a demo