表单内自动表格添加数据失效：点击Add按钮时addData函数未执行如何修复？

问题1：表单默认提交行为导致页面刷新 #

<form>内的<button>默认是submit类型，点击后会触发表单提交、页面刷新，导致addData函数执行后立刻被刷新覆盖，看起来像没执行。

解决方法：给按钮明确设置type="button"，避免触发表单提交：

<button type="button" onclick="addData()">Add</button>

问题2：日期和游戏类型未正确获取值 #

代码中直接将DOM元素对象赋值给单元格的innerHTML，应该取元素的value属性才能拿到实际内容：

// 原错误代码
row.insertCell(3).innerHTML = store_date;
row.insertCell(4).innerHTML = store_gametype;

// 修改为
row.insertCell(3).innerHTML = store_date.value;
row.insertCell(4).innerHTML = store_gametype.value;

完整修正后的代码 #

HTML部分 #

<form>
  <table id='dymanictable'>
    <tr>
      <td><label for="price">Price:</label><br></td>
      <td> <input type="text" id="price" name="price"><br></td>
    </tr>
    <tr>
      <td> <label for="moneyback">Money back:</label><br></td>
      <td> <input type="text" id="moneyback" name="moneyback"><br></td>
    </tr>
    <tr>
      <td> <label for="profit">Profit:</label><br></td>
      <td> <input type="number" id="profit" name="profit" min="-100" max="100"><br></td>
    </tr>
    <tr>
      <td><label for="DateField">Current date:</label></td>
      <td><input type="date" id="DateField" name="DateField" readonly></td>
    </tr>
    <tr>
      <td> <label for="gametype">Gametype:</label></td>
      <td>
        <select id="gametype" name="gametype">
          <option value="cashgame">Cash game</option>
          <option value="twister">Twister</option>
          <option value="blackjack">Blackjack</option>
          <option value="sitgo">Sit&Go</option>
        </select>
      </td>
    </tr>
    <!-- 添加表头让表格结构更清晰 -->
    <tr>
      <th>Price</th>
      <th>Money Back</th>
      <th>Profit</th>
      <th>Date</th>
      <th>Game Type</th>
    </tr>
  </table>
  <br>
  <button type="button" onclick="addData()">Add</button>
</form>

JavaScript部分 #

document.getElementById('DateField').valueAsDate = new Date();

function addData() {
  var store_price = document.getElementById("price");
  var store_moneyback = document.getElementById("moneyback");
  var store_profit = document.getElementById("profit");
  var store_date = document.getElementById("DateField");
  var store_gametype = document.getElementById("gametype");
  var table = document.getElementById("dymanictable");
  
  // 直接在表格末尾插入新行，无需手动计算行数
  var row = table.insertRow();
  row.insertCell(0).innerHTML = store_price.value;
  row.insertCell(1).innerHTML = store_moneyback.value;
  row.insertCell(2).innerHTML = store_profit.value;
  row.insertCell(3).innerHTML = store_date.value;
  row.insertCell(4).innerHTML = store_gametype.value;

  // 可选：清空输入框，方便后续录入
  store_price.value = '';
  store_moneyback.value = '';
  store_profit.value = '';
}

内容的提问来源于stack exchange，提问作者CodeMaybe