我正在创建一个输入来捕获与捕获的鱼有关的数据。当单击提交按钮时,我看到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>
答案 0 :(得分:2)
这是因为您的按钮当前正在刷新页面,
如果你添加
型=&#34;按钮&#34;
按钮它将显示一个额外的tr并在控制台中显示消息
答案 1 :(得分:0)
首先将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