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

Question

我有一个包含日期列的HTML表。我想针对其中一个日期列实现表中每一行的倒计时。

这是我的HTML代码：

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

这里是我的javascript代码

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

计时器有效，但只填充表格最后一行的最后一行的倒计时。

我已经检查但无法弄清楚为什么它没有填充前面的行。

任何帮助将不胜感激。

Answer 1

我只需在setInterval函数内运行循环，而不是在循环内运行setInterval函数。

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