Search code examples
javascripthtmlstopwatch

Dynamic table first row need to sow first

I have found javascript source code which work like stop watch and show data start time, end time length and time between two time interval in table dynamically. Here first row is going down after next click , but I need first row will remain first after next click and next data will display at next one by one.

Thanks to all

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>
Solution

  • Just update your $('#history').prepand() to $('#history').append() like this:

        $('#history').append(
    <tr><td>'+formattedStart+'</td><td>'+formattedEnd+'</td><td>'+lengthFormatted+'</td><td>'+timeBetweenFormatted+'</td></tr>')}

    So, it will insert Table Row at the end of History Div.