将条目数据发布到 html 表行

Posted 2023-03-05

【中文标题】将条目数据发布到 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?