将条目数据发布到 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 表行的主要内容,如果未能解决你的问题,请参考以下文章

将数据库条目分组到动态 HTML 表中

将表单条目保存到变量并添加到表中

数据库条目中的 html 标记未呈现为 html

Node.js-在确认框中单击确定时如何删除条目

将条目从 poll 复制到 poll_logs 时重复键条目

烧瓶-PyMongo。如何显示从 python 到 html 的所有条目?