Question

 function addData() {

   var rows = "";
   var ID = document.getElementById("id").value;
   var Task = document.getElementById("task").value;
   rows += "<tr><td>" + ID + "</td><td>" + Task + "</td></tr>";
   var tbody = document.querySelector("#table tbody");
   var tr = document.createElement("tr");

   tr.innerHTML = rows;
   tbody.appendChild(tr)
 }

<body>
  <form onsubmit="" method="POST">
    ID:
    <input type="text" id="id" required>New task:
    <br>
    <textarea id="task" required></textarea>
    <br>
    <input type="submit" value="Add" onclick="addData()">
  </form>

  <h3>Task Table</h3>
  <div id="excell">
    <table id="table" cellspacing="0px" cellpadding="25px" text-align="center">
      <thead>
        <tr>
          <td>ID</td>
          <td>Task</td>
        </tr>
      </thead>

      <tbody>

      </tbody>
    </table>
  </div>
</body>

我正在学习Javascript而我正在尝试实现一个小的“ID和任务”表，但不知何故，只有在我输入2种数据时才输入一种数据，例如只有ID或只有任务与此同时，没有任何事情发生。如果你告诉我这是什么问题我该如何解决，我将不胜感激。谢谢。

这是我的HTML

    <body>
<form onsubmit="" method="POST">
    ID:
  <input type="text" id="id" required>

    New task:<br>
  <textarea id="task" required></textarea>
    <br>
<input type="submit" value="Add" onclick="addData()">
</form>

<h3>Task Table</h3>
<div id = "excell">
        <table id = "table" cellspacing = "0px" cellpadding = "25px" text-align = "center">
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Task</td>
                </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
</div>
</body>

这是我的JS

 function addData() {

            var rows = "";
            var ID = document.getElementById("id").value;
            var Task = document.getElementById("task").value;   
            rows += "<tr><td>" + ID + "</td><td>" + Task + "</td></tr>";
            var tbody = document.querySelector("#table tbody");
            var tr = document.createElement("tr");

        tr.innerHTML = rows;
        tbody.appendChild(tr)
}

Answer 1

您的代码存在实际问题，您使用了“提交”按钮。通常，当点击提交按钮时，它会将表单标记的数据发布到操作属性，这意味着将页面转移到下一个;如果没有给出动作属性，它会产生闪烁效果并保持当前页面并使所有组件都为空。您的代码也会发生同样的情况。更好地改变代码

<input type="Submit" value="Add" onClick="addData();"/>

进入

<input type="BUTTON" value="Add" onClick="addData();"/>

并尝试其工作正常。

无法使用普通JS向表中添加数据

1 个答案: