简体   繁体   English

td 满后添加新表行

[英]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添加新行。

HTML code 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 code 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);
}

here is a demo这是一个 演示

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM