当单击在表中创建新行时，它只会短暂出现

When creating new row in table on click it appears only momentarily

本文关键字：单击 新行时 创建      更新时间：2023-09-26

我正在尝试创建一个交互式表，当单击一个按钮（打卡）时，会创建一个新行和三列，并用当前时间填充第一个单元格。单击第二个按钮（计时）时，它会用当前时间填充最后一行的第二个单元格。问题是新添加的信息没有停留在页面上。有没有一种巧妙的方法可以在每次点击按钮时主动更新代码？

HTML:

<div class="col-md-4 timebtns">
    <form method="post">
    <input type="submit" id="clockin" name="clockin" class="btn btn-success" value="Clock In" /><br /><br />
    <input type="submit" id="clockout" name="clockout" class="btn btn-danger" value="Clock Out" />
    </form>
</div>
<table class="table table-striped">
    <tr>
        <td><h2>In</h2></td>
        <td><h2>Out</h2></td>
        <td><h2>Total</h2></td>
        </tr>
    <tr>
        <td>InData</td>
        <td>OutData</td>
        <td>TotalData</td>
    </tr>
</table>

JS:

<script>
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds(); //set variable to current time
$("#clockin").click(function(){
    $('table tbody:last').append('<tr><td>'+time+'</td><td></td><td></td></tr>');
});
$("#clockout").click(function(){
        $('table tr:last td:nth-child(2)').append(time);
});
</script>

在您的打卡点击功能中，行

$('table tr:last nth:child(2)').append(time);

是错误的。正确的格式是：

$('table tr:last td:nth-child(2)').append(time);
相关文章：