Question

我正在创建一个输入来捕获与捕获的鱼有关的数据。当单击提交按钮时，我看到tr快速显示然后消失，同样，我看到console.log消息显示一瞬间然后消失。

代码发布在下面，但是运行代码段看起来不像通过浏览器看到的那样。我在这里设置了一个实时网站：http://fishrecord.jwhdesign.net/

我意识到这对大多数人来说可能很容易弄明白，所以没必要告诉我，我已经知道这是多么愚蠢。

非常感谢任何帮助。

function displayFishData() {
  var table = document.getElementById("test"); //find "test" AKA the table
  var row = table.insertRow(); //add row to that table
  row.insertCell(); //insert cell to table
  console.log("adding a row to the table");
}

table {
  border: 1px solid black;
  margin: 0 auto;
  width: 80%;
}

<h1>Fish Record</h1>
<form>
  Species:
  <select>
    <option value="blank"></option>
    <option value="Northern Pike">Northern Pike</option>
    <option value="Largemouth Bass">Largemouth Bass</option>
    <option value="Smallmouth Bass">Smallmouth Bass</option>
    <option value="Chain Pickerel">Chain Pickerel</option>
    <option value="Pike-Pickerel Hybrid">Pike-Pickerel Hybrid</option>
    <option value="Panfish">Panfish</option>
    <option value="Other">Other</option>
  </select>

  Weight (lbs):
  <input type='number'></input>
  Length (inches):
  <input type='number'></input>
  Comments:
  <input rows="1"></input>
  <br>
  <button onclick="displayFishData()">Submit</button>
</form>

<table id="test">
  <thead>
    <tr>
      <th>Species</th>
      <th>Weight (lbs)</th>
      <th>Length (inches)</th>
      <th>Comments</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 1

这是因为您的按钮当前正在刷新页面，

如果你添加

型=＆＃34;按钮＆＃34;

按钮它将显示一个额外的tr并在控制台中显示消息

Answer 2

首先将displayFishData()添加到表单而不是按钮！看起来像这样<form onsubmit="displayFishData()">这将有助于您以更好的方式控制表单输出。

使用<input type="submit" />的BTW比<button></button>

更好

对于更简单的数据插入，请执行以下操作：

var table = document.getElementById("test");
var row = table.insertRow();
var e1 = row.insertCell(0);
var e2 = row.insertCell(1);
// keep adding as much rows as you got
// this change the innerHTML
e1.innerHTML = "the data you got from a form element";
// repeat that

调用函数时元素不可见

2 个答案: