td 满后添加新表行

Question

第七天之后，应该添加新的表格行。 如果用户添加新值，则应添加最近添加的 td 。 令人沮丧的是，我不知道如何在这种情况下操作 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>

我尝试了很多方法，找不到正确的方法。 许多 forEach 算法，DOM 操作，但我仍然不知道。 对这种情况有什么想法吗？ 顺便说一句，我需要使用 vanilla js，而不是任何插件或 Jquery 创建。 希望，一切都清楚了，如果不只是评论更多细节，请。 感谢所有回复。

Answer 1

   // 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);
    }
  });

Answer 2

您可以使用childElementCount检查一行中的元素数，并使用appendChild添加新行。

HTML代码

    <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>

JS代码

// 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);
}

这是一个 演示