将条目数据发布到 html 表行
Posted
技术标签:
【中文标题】将条目数据发布到 html 表行【英文标题】:Post entry data to html table rows 【发布时间】:2020-10-19 03:31:05 【问题描述】:我有一个 html 表格,我想在提交时创建一个新的输入数据行。只有日期和里程条目会呈现到表格中,其他列将是后端计算。
var miles = $('#miles').value;
var date = $('#date').value;
var mileSubmit = document.getElementById('add-mileage');
mileSubmit.document.addEventListener('click', function(date, miles)
document.getElementById('add-mileage').appendChild(
document.createElement("tr")
);
);
table, th, td
border: 1px solid black;
padding: 7px;
<section>
<form class="maintenance">
<label for="date">Date:</label>
<input type="date" id="date">
<label>Enter Current Mileage:</label>
<input name="mileage" type="number" id="miles">
</form>
<button id="add-mileage" type="submit" >Submit</button>
</section>
<h2>Mileage LogBook</h2>
<table id="logbook">
<tr>
<th>Date</th>
<th>Mileage</th>
<th>column C</th>
<th>Column D</th>
</tr>
</table>
<script src="/javascript/add-mileage.js"></script>
【问题讨论】:
首先,您需要将Child 附加到表格,而不是提交按钮。 【参考方案1】:提交未插入到表中,因为您没有任何代码可将数据插入到表中。现在,您的函数只是尝试从服务器获取数据,如果成功,它将窗口位置更改为/logbook
,否则会弹出错误。
您的意思是像这样以某种方式操纵 DOM 吗?
const table = document.getElementById("logbook");
const row = table.insertRow(-1);
// etc etc?
【讨论】:
以上是关于将条目数据发布到 html 表行的主要内容,如果未能解决你的问题,请参考以下文章