使用 javascript 在表格中插入表单值答案

【问题标题】：Insert form values in a table using javascript使用 javascript 在表格中插入表单值
【发布时间】：2021-02-05 13:18:24
【问题描述】：

document.getElementById("submit").onclick = function () {
  document.getElementById("table").style.display = "block";

  var table = document.getElementById("table");
  var row = table.insertRow(-1);
  var date = row.insertCell(0);
  var desc = row.insertCell(1);
  var amt = row.insertCell(2);
  date.innerHTML = document.getElementById("date").value;
  desc.innerHTML = document.getElementById("desc").value;
  amt.innerHTML = document.getElementById("amount").value;

  return false;
}

table {
  display: none;
}

<h1>Expense Tracker</h1>

<form action="">
  <label id="date">Date: </label>
  <input type="date" id="date">
  <br>

  <label id="desc">Description: </label>
  <input type="text" id="desc">
  <br>

  <label id="amount">Amount: </label>
  <input type="text" id="amount">
  <br>

  <input type="button" id="submit" value="Submit">
  <br>
</form>

<table id="table">
  <tr>
    <th>Date</th>
    <th>Description</th>
    <th>Amount</th>
  </tr>
</table>

我想通过单击提交按钮将表单中给出的输入插入到表格中。我尝试使用此方法执行此操作，但始终显示未定义。我哪里错了？有更好的选择吗？我只想使用 Javascript。

【问题讨论】：

标签： javascript forms html-table

【解决方案1】：

问题在于您的标签。它们与您的输入字段具有相同的 ID。由于 document.getElementById("date") 仅找到所需 id 的第一次出现，因此您的标签将被返回。

要解决这个问题，您可以将标签更改为

<label for="date">Date: </label>

<html>
    <head>
        <title>Expense Tracker</title>
        
        <style type="text/css">
            table
            {
                display: none;
            }
        </style>
    </head>
    
    <body>
        <h1>Expense Tracker</h1>
        
        <form action="">
            <label for="date">Date: </label>
            <input type="date" id="date">
            <br>
            
            <label for="desc">Description: </label>
            <input type="text" id="desc">
            <br>
            
            <label for="amount">Amount: </label>
            <input type="text" id="amount">
            <br>
            
            <input type="button" id="submit" value="Submit">
            <br>
        </form>
        
        <table id="table">
            <tr>
                <th>Date</th>
                <th>Description</th>
                <th>Amount</th>
            </tr>
        </table>
    
        <script type="text/javascript">
            
            document.getElementById("submit").onclick=function()
            {
                document.getElementById("table").style.display="block";
                
                var table = document.getElementById("table");
                var row = table.insertRow(-1);
                var date = row.insertCell(0);
                var desc = row.insertCell(1);
                var amt = row.insertCell(2);
                date.innerHTML = document.getElementById("date").value;
                desc.innerHTML = document.getElementById("desc").value;
                amt.innerHTML = document.getElementById("amount").value;
                
                return false;
            }
        
        </script>
    </body>
</html>

【讨论】：

【解决方案2】：

在您的 html 文件中，每个 <label> 和 <input> 标签都有相同的 id，所以问题发生了。

例如，对于最后一个input，标签的id 为amount，输入标签的id 也为amount。

所以document.getElementById("amount") 将返回第一个标签<label> 标签，所以它不会没有值。

为了解决这个问题，需要改变标签的id，以免重复。

document.getElementById("submit").onclick = function () {
  document.getElementById("table").style.display = "block";

  var table = document.getElementById("table");
  var row = table.insertRow(-1);
  var date = row.insertCell(0);
  var desc = row.insertCell(1);
  var amt = row.insertCell(2);
  date.innerHTML = document.getElementById("date").value;
  desc.innerHTML = document.getElementById("desc").value;
  amt.innerHTML = document.getElementById("amount").value;

  return false;
}

table {
  display: none;
}

<h1>Expense Tracker</h1>

<form action="">
  <label for="date">Date: </label>
  <input type="date" id="date">
  <br>

  <label for="desc">Description: </label>
  <input type="text" id="desc">
  <br>

  <label for="amount">Amount: </label>
  <input type="text" id="amount">
  <br>

  <input type="button" id="submit" value="Submit">
  <br>
</form>

<table id="table">
  <tr>
    <th>Date</th>
    <th>Description</th>
    <th>Amount</th>
  </tr>
</table>

【讨论】：