Dynamic table first row need to sow first

StackOverflow https://stackoverflow.com/questions/21300307

  •  01-10-2022
  •  | 
  •  

Question

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>
Était-ce utile?

La 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.

Autres conseils

just check the addRowToTable() method in your code at last of the method there is use of

.prepend()

just replace it with 

.append()

kepp everything as it is.

Here is the working example fidle

You just need to change prepend method to append method

 $('#history').append('<tr><td>'+formattedStart+'</td><td>'+formattedEnd+'</td><td>'+lengthFormatted+'</td><td>'+timeBetweenFormatted+'</td></tr>')
    }
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top