当在表中点击创建新行时，它只是瞬间出现

Question

我试图创建一个交互式表，其中当单击一个按钮（clockin）时创建一个新行和三列，用当前填充的第一个单元格时间。当第二个按钮被点击（时钟输出）时，它会用当前时间填充最后一行的第二个单元格。问题是新添加的信息不会保留在页面上。每次单击按钮时，我是否可以主动更新代码？

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> 

Answer 1

在你的时钟输出点击功能线

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

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

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