[英]Adding new table row after td's full
After seventh day, new table row should be added.第七天之后,应该添加新的表格行。 And if the user add new value it should be added td which added recently.
如果用户添加新值,则应添加最近添加的 td 。 The frustrating point is, I don't know how to manipulate DOM's for this situation.
令人沮丧的是,我不知道如何在这种情况下操作 DOM。
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.
许多 forEach 算法,DOM 操作,但我仍然不知道。 Any idea for that situation?
对这种情况有什么想法吗? Btw, I need to create with vanilla js, not any plugin, or Jquery.
顺便说一句,我需要使用 vanilla js,而不是任何插件或 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.您可以使用
childElementCount
检查一行中的元素数,并使用appendChild
添加新行。
<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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.