使用Javascript将值插入多个隐藏字段，每个隐藏字段都以不同的形式显示

Question

我有一个HTML表格，其中包含从数据库中提取的记录。来自“调用时间”列的条目从MySQL数据库中检索。列“定时器”中的条目不从数据库中检索，它是一个Javascript定时器。

一旦在确认用户点击按钮，停止和定时器的最终值的计时器必须插入到数据库中。以下Javascript计时器是其他人代码的稍微修改版本（Elapsed time from a given time in the database）

问题：我不知道如何将经历时间值插入到隐藏表单字段中。请注意，对于ID为id="stoppedtime<?php echo $stopid; ?>的每个条目都有一个隐藏表单域，我知道必须不断增加stopid变量的值。我需要将每个经过的时间（按下确认按钮之后）插入到相应的隐藏表单字段中，以便稍后可以将这些隐藏表单字段的值插入到数据库中。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
ElapsedTimeLogger = function(dateElementId, elapsedElementId, interval) { 
    var container = $(elapsedElementId); 
    var time = parseDate($(dateElementId).text()); 
    var interval = interval; 
    var timer; 

    function parseDate(dateString) { 
     var date = new Date(dateString); 
     return date.getTime(); 
    } 

    function update() { 
     var systemTime = new Date().getTime(); 
     elapsedTime = systemTime - time; 
     container.html(prettyPrintTime(Math.floor(elapsedTime/1000))); 
     // I Know I have to do something here to put the elapsed time into the hidden field 
     //But I don't know how exactly to do it 
x = document.getElementById("stoppedid"); // The Problem here is that there are Multiple IDs!! 
x.value=; prettyPrintTime(Math.floor(elapsedTime/1000)) // Change the hidden input field value 
    } 

    function prettyPrintTime(numSeconds) { 
     var hours = Math.floor(numSeconds/3600); 
     var minutes = Math.floor((numSeconds - (hours * 3600))/60); 
     var seconds = numSeconds - (hours * 3600) - (minutes * 60); 

     if (hours < 10) hours = "0" + hours; 
     if (minutes < 10) minutes = "0" + minutes; 
     if (seconds < 10) seconds = "0" + seconds; 
     var time = hours + ":" + minutes + ":" + seconds; 

     return time; 
    } 

    this.start = function() { 

     timer = setInterval(function() {update()}, interval * 1000); 
    } 

    this.stop = function() { 
     clearTimeout(timer); 
    } 
} 
$(document).ready(function() { 
    <?php 
    $count= $totalRows; // Total Number of Entries in the Database 
    $datevar=1; 
    $elapsedvar =1; 
    $timeloggervar= 1; 
    $confirmvar=1;  

if ($count > 0){ 
     do { 
     $count--; 
     $timeloggervar++; 
     $confirmvar++; 
     $datevar++; 
     $elapsedvar++;?> 
     var timeLogger<?php echo $timeloggervar; ?> = new ElapsedTimeLogger("#date<?php echo $datevar; ?>", "#elapsed<?php echo $elapsedvar; ?>", 1); 
     timeLogger<?php echo $timeloggervar; ?>.start(); 

     $("#Confirm<?php echo $confirmvar; ?>").click(function() { //Stop timer upon clicking the Confirm Button 
      timeLogger<?php echo $timeloggervar; ?>.stop(); 

     }); 
     <?php } while ($count > 0);}?> 

    }); 

    </script> 

一些额外的信息： 表中的每个条目都有一个独特的形式这样。我在表单中放置了一个隐藏字段，以便每个记录的最终已用时间值可以存储在值部分中，如下所示。

<?php echo'<form action="'.$_SERVER['PHP_SELF'].'" method="post" id="form'.$formid.'">';?> 
<input name="Num" type="hidden" value="<?php echo $results['Time of Call']; ?>" /> 
**<input type="hidden" name="stoppedtime" id="stoppedtime<?php echo $stopid; ?>" value="">** 
..... 

如果你能帮助我，真的很感激它，谢谢！

编辑：

function update(id) { 
     var systemTime = new Date().getTime(); 
     elapsedTime = systemTime - time; 
     container.html(prettyPrintTime(Math.floor(elapsedTime/1000))); 
     // I Know I have to do something here to put the elapsed time into the hidden field 
     //But I don't know how exactly to do it 
x = document.getElementById("stoppedid"+id); // The Problem here is that there are Multiple IDs!! 
x.value= prettyPrintTime(Math.floor(elapsedTime/1000)); // Change the hidden input field value 
    } 


this.start = function(id) { 
    timer = setInterval(function(id) {update(id)}, interval * 1000); 
} 

Answer 1

试试这个，

<script> 
ElapsedTimeLogger = function(dateElementId, elapsedElementId, hiden, interval) { 
. 
. 
. 
function update() { 
    var systemTime = new Date().getTime(); 
    elapsedTime = systemTime - time; 
    container.html(prettyPrintTime(Math.floor(elapsedTime/1000))); 
$(hiden).val(prettyPrintTime(Math.floor(elapsedTime/1000))); 
} 
. 
. 
. 

$(document).ready(function() { 
<?php 
for($id=1; $id<$totalRows; $id++){ 
?> 
    var timeLogger = new ElapsedTimeLogger("#date<?php echo $id;?>", "#elapsed<?php echo $id;?>","#stoppedid<?php echo $id;?>", 1); 
    timeLogger.start(); 

    $("#Confirm<?php echo $id; ?>").click(function() { //Stop timer upon clicking the Confirm Button 
     timeLogger.stop(); 

    }); 
<?php 
} 
?> 
}); 
</script> 

Answer 2

在$("#Confirm<?php echo $confirmvar; ?>").click(...功能，补充一点：

var stopvalue = $(this).parents('td').prev().text(); 

$(this).parents('td').find('input:hidden').val(stopvalue); 

调整代码，以便其能够与表格的布局工作。