我找到了 javascript 源代码，它的工作方式类似于秒表，并动态显示数据开始时间、结束时间长度以及表中两个时间间隔之间的时间。这里，第一行在下次单击后会下降，但我需要在下次单击后第一行将保持在第一位，并且下一个数据将在下一个逐个显示。
感谢大家
enter code here
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
function PadDigits(n, totalDigits)
{
n = n.toString();
var pd = '';
if (totalDigits > n.length)
{
for (i=0; i < (totalDigits-n.length); i++)
{
pd += '0';
}
}
return pd + n.toString();
}
var lastEndTime = null;
var starttime = null;
var endtime = null;
function startTimer()
{
date = new Date();
starttime = date;
if(lastEndTime == null)
{
$('#history').html('');
}
$('#action').html('<img src="pause.png"><br>Stop Timer');
}
function stopTimer()
{
$('#action').html('<img src="play.png"><br>Start Timer');
date = new Date();
endtime = date;
addRowToTable(starttime,endtime,lastEndTime);
lastEndTime = endtime;
endtime = null;
starttime = null;
}
function addRowToTable(starttime,endtime,lastEndTime)
{
formattedStart = PadDigits(starttime.getHours(),2)+':'+PadDigits(starttime.getMinutes(),2)+":"+PadDigits(starttime.getSeconds(),2);
formattedEnd = PadDigits(endtime.getHours(),2)+':'+PadDigits(endtime.getMinutes(),2)+":"+PadDigits(endtime.getSeconds(),2);
seconds = parseInt((endtime.getTime() - starttime.getTime())/1000);
lengthMinutes = parseInt(seconds/60);
lengthSeconds = parseInt(seconds%60);
lengthFormatted = PadDigits(lengthMinutes,2)+":"+PadDigits(lengthSeconds,2);
if(lastEndTime == null)
{
timeBetweenFormatted = "N/A";
}
else
{
timeBetween = parseInt((starttime.getTime() - lastEndTime.getTime())/1000);
timeBetweenMinutes = parseInt(timeBetween/60);
timeBetweenSeconds = parseInt(timeBetween%60);
timeBetweenFormatted = PadDigits(timeBetweenMinutes,2)+":"+PadDigits(timeBetweenSeconds,2);
}
$('#history').prepend('<tr><td>'+formattedStart+'</td><td>'+formattedEnd+'</td><td>'+lengthFormatted+'</td><td>'+timeBetweenFormatted+'</td></tr>')
}
function toggleTimer()
{
if (starttime == null)
{
startTimer();
}
else
{
stopTimer();
}
}
$(document).ready(function(){
$('#action').click(function(kevent){
toggleTimer();
});
$(document).keypress(function(kevent){
$('#action').click();
});
});
</script>
<style type="text/css">
body, body *{
font-family: Helvetica;
}
body{
margin:0px;
}
table.data-table
{
width: 100%;
background-color: #FFFFFF;
font-size: 11px ;
border: 0px;
border-collapse: collapse;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
table.data-table thead
{
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
table.data-table thead th
{
background: #DDDDDD url(data-table-header.png) repeat-x top;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(248, 248, 248)), color-stop(0.5, rgb(248, 248, 248)), color-stop(0.5, rgb(233, 233, 233)), to(rgb(233, 233, 233))) content-box padding-box;
text-align: left;
padding-left: 2px;
}
table.data-table tr:nth-child(2n)
{
background-color: #ECF3FE;
}
table.data-table tr:odd
{
background-color: #ECF3FE;
}
table.data-table td
{
padding-left: 2px;
}
table.data-table tbody
{
overflow-y: auto;
}
#action
{
border: 0px;
background: transparent;
}
</style>
</head>
<body>
<button type="button" id="action"><img src="play.png"><br>Start Timer</button><br>
<div>
<table class="data-table">
<thead>
<tr>
<th>Start Time</th>
<th>End Time</th>
<th>Length</th>
<th>Time Between</th>
</tr>
</thead>
<tbody id="history">
</tbody>
</table>
</div>
</body>
</html>
最佳答案
只需将 $('#history').prepand() 更新为 $('#history').append()，如下所示:
$('#history').append(
<tr><td>'+formattedStart+'</td><td>'+formattedEnd+'</td><td>'+lengthFormatted+'</td><td>'+timeBetweenFormatted+'</td></tr>')}
因此，它将在 History Div 的末尾插入 Table Row。
关于javascript - 动态表第一行需要先播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21300307/