HTML/JS 我的“名称：”字段不会提交到输出表单 onclick=

Question

我的“退出”名称：表单不会填充/输出到我的表单下图表中的“名称”列。 我的时间，下拉框和登录/退出按钮都可以工作，但即使我将“id”更改为“tname”之类的内容，它仍然不会填充。 如果没有其他办法可以解决这个问题，我对解决方法的想法很感兴趣。 我将在下面列出我的代码。 请指教。

<form name="SIGN IN" id="form1" value="1" border="5" align="center">
  <h4><br></strong>
    <table align="center" border="5">
      <tr>
        <td><label for="Name">Name:</label></tr< /td>
          <input list="Names" name="Name" id="fname">


      <tr>
        <td><input type="button" value="SIGN IN" onclick="display()" /></td>
      </tr>

      <form name="SIGN OUT" id="form2" value="1" border="5">
        <tr>
          <td>Name:<input id="fname2"> <br></td>
        </tr>
      </form>
      <tr>
        <td><input type="button" value="SIGN OUT" onclick="display()" /></td>
      </tr>



      <table width="400px" align="center" colspan="40" table border="5">
        <thead>
          <tr style="background-color:#8FBC8F;" id='header'>
            <td align="center"><b>Name</b></td>
            <td align="center"><b>Company</b></td>
            <td align="center" class="wide"><b>Time In</b></td>
            <td align="center" class="wide"><b>Time Out</b></td>
            <td align="center" class="wide"><b>Description of Work</b></td>
          </tr>
        </thead>
        <tbody>
          <template id="row">
            <tr style="background-color:#8F8FBC;" class="data">
              <td align="center">
                <div class="displayarea"></div>
              </td>
              <td align="center">
                <div class="displayarea1"></div>
              </td>
              <td align="center">
                <div class="displayarea2"></div>
              </td>
              <td align="center">
                <div class="displayarea3"></div>
              </td>
              <td align="center">
                <div class="displayarea4"></div>
              </td>

            </tr>
          </template>

        </tbody>
      </table>

function alternateGetValue() {
  const Items = [...document.querySelectorAll('.data')]
  .map(row => [...row.querySelectorAll('td>div')]
       .map(d => d.textContent).join(',')
      ).join('\n');
  console.log(Items);
  return Items;
}

function display() {
  const template = document.getElementById("row");
  const clone = template.content.cloneNode(true);
  const additem = (dest, src) => {
    const s = document.querySelector(src);
    clone.querySelector(dest).innerHTML = s.value;
    s.value = "";
  };
  additem(".displayarea", "#fname");
  additem(".displayarea1", "#lname");
  additem(".displayarea2", "#sname");
  additem(".displayarea3", "#pname");
  additem(".displayarea4", "#jname");

  template.insertAdjacentElement('beforebegin', clone.firstElementChild);
}

function destroyClickedElement(event) {
  document.body.removeChild(event.target);
}

Answer 1

考虑到所提供的代码， #fname2的情况下，您需要从 id #fname2输入中获取值。 您可以在 SIGN IN 和 SIGN OUT 上调用单独的函数，也可以将值传递给display()函数，您可以根据该值确定从哪个输入 id 获取值。 下面是第二种方法的实现。

 function alternateGetValue() { const Items = [...document.querySelectorAll('.data')] .map(row => [...row.querySelectorAll('td>div')] .map(d => d.textContent).join(',') ).join('\\n'); console.log(Items); return Items; } function display(isSignOut) { const template = document.getElementById("row"); const clone = template.content.cloneNode(true); const additem = (dest, src) => { const s = document.querySelector(src); clone.querySelector(dest).innerHTML = s.value; s.value = ""; }; additem(".displayarea", isSignOut ? "#fname2" : "#fname"); template.insertAdjacentElement('beforebegin', clone.firstElementChild); } function destroyClickedElement(event) { document.body.removeChild(event.target); }

 <table align="center" border="5"> <form name="SIGN IN" id="form1" value="1" border="5" align="center"> <tr> <td> <label for="Name">Name:</label> <input list="Names" name="Name" id="fname"> </td> </tr> <tr> <td align="center"> <input type="button" value="SIGN IN" onclick="display(false)" /> </td> </tr> </form> <form name="SIGN OUT" id="form2" value="1" border="5" align="center"> <tr> <td>Name:<input id="fname2"> <br></td> </tr> </form> <tr> <td align="center"> <input type="button" value="SIGN OUT" onclick="display(true)" /> </td> </tr> </table> <table width="400px" align="center" colspan="40" table border="5"> <thead> <tr style="background-color:#8FBC8F;" id='header'> <td align="center"><b>Name</b></td> <td align="center"><b>Company</b></td> <td align="center" class="wide"><b>Time In</b></td> <td align="center" class="wide"><b>Time Out</b></td> <td align="center" class="wide"><b>Description of Work</b></td> </tr> </thead> <tbody> <template id="row"> <tr style="background-color:#8F8FBC;" class="data"> <td align="center"> <div class="displayarea"></div> </td> <td align="center"> <div class="displayarea1"></div> </td> <td align="center"> <div class="displayarea2"></div> </td> <td align="center"> <div class="displayarea3"></div> </td> <td align="center"> <div class="displayarea4"></div> </td> </tr> </template> </tbody> </table>