为html表中的每一行添加倒计时

Question

I have an HTML table that contains a date column. I want to implement a countdown for each row in the table against one of the date columns.

Here goes my HTML code:

 <table  style="width: 100%" id="bidsTable">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th >Amount</th>

                        <th >Start Date</th>
                        <th >Bids</th>
                        <th >End Date</th>
                        <th ></th>
                    </tr>
                </thead>
                <tbody>
                        <tr>
                            <td >Peugeot 406 car fro sale</td>
                            <td >800000.00</td>

                            <td >2017-04-10 3:48:47 PM</td>
                            <td >1</td>
                            <td >2017-05-10 3:48:47 PM</td>
                            <td ></td>
                        </tr>
                        <tr>
                            <td >House for sale in Kubwa</td>
                            <td >4000000.00</td>

                            <td >2017-04-10 3:48:47 PM</td>
                            <td >0</td>
                            <td >2017-06-10 3:48:47 PM</td>
                            <td ></td>
                        </tr>
                        <tr>
                            <td >Five hectare farming land for lease</td>
                            <td >3000000.00</td>

                            <td >2017-04-10 3:48:47 PM</td>
                            <td >0</td>
                            <td >2017-07-10 3:48:47 PM</td>
                            <td ></td>
                        </tr>



                </tbody>
            </table>

And here goes my javascript code

 <script>
var table = document.getElementById("bidsTable");
for (var i = 1, row; row = table.rows[i]; i++) {
    //iterate through rows
    //rows would be accessed using the "row" variable assigned in the for loop

    var endDate = row.cells[4];
    countDownDate = new Date(endDate.innerHTML.replace(/-/g, "/")).getTime();
    var countDown = row.cells[5];
    // Update the count down every 1 second

    var x = setInterval(
    function () {
        // Get todays date and time
        var now = new Date().getTime();

        // Find the distance between now an the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);


        // Display the result in the element
        countDown.innerHTML = (days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ");

         //If the count down is finished, write some text 
        if (distance < 0) {
            clearInterval(x);
            countDown.innerHTML = "Bid closed";
        }
    }, 1000);
}
 </script>

The timer works but only populates the countdown for the last row for the last row of the table.

I've checked but can't figure out why it's not populating the previous rows.

Any help will be appreciated.

Answer 1

I just had to run the loop inside the setInterval function and not the setInterval function inside the loop.

<script>

var table = document.getElementById("bidsTable");

var x = setInterval(
    function () {

        for (var i = 1, row; row = table.rows[i]; i++) {
            //iterate through rows
            //rows would be accessed using the "row" variable assigned in the for loop

            var endDate = row.cells[4];
            countDownDate = new Date(endDate.innerHTML.replace(/-/g, "/")).getTime();
            var countDown = row.cells[5];
            // Update the count down every 1 second

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now an the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);


            // Display the result in the element
            countDown.innerHTML = (days + "d " + hours + "h "
                + minutes + "m " + seconds + "s ");

            //If the count down is finished, write some text 
            if (distance < 0) {
                clearInterval(x);
                countDown.innerHTML = "Bid Closed";
            }
        }
    }, 1000);
 </script>