4

データベースから取得されたレコードを含む HTML テーブルがあります。「通話時間」列のエントリは、MySQL データベースから取得されます。「Timer」列のエントリはデータベースから取得されたものではなく、Javascript タイマーです。

ここに画像の説明を入力

ユーザーが確認ボタンをクリックすると、タイマーが停止し、タイマーの最終値をデータベースに挿入する必要があります。次の Javascript タイマーは、他の誰かのコードを少し変更したバージョンです (データベース内の特定の時間からの経過時間) 。

問題: 経過時間の値を非表示のフォーム フィールドに挿入する方法がわかりません。ID を持つエントリごとに 1 つの非表示フォーム フィールドがあることに注意してください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>

追加情報: テーブル内のすべてのエントリには、このようなUNIQUE FORMがあります。以下のように、各レコードの FINAL ELAPSED TIME VALUE を値の部分に格納できるように、フォームに隠しフィールドを配置しました。

<?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);
}
4

2 に答える 2

1

$("#Confirm<?php echo $confirmvar; ?>").click(...関数で、これを追加します。

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

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

テーブル レイアウトで動作するようにコードを調整します。

于 2013-02-22T08:59:16.047 に答える
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>
于 2013-02-22T09:26:40.843 に答える