为html表格中的每一行添加倒计时 [英] add countdown for each row in html table
本文介绍了为html表格中的每一行添加倒计时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含日期列的HTML表格。我希望针对日期列中的每一列实施倒计时。
这里是我的HTML代码：
< table style =width：100％id =bidsTable>
< thead>
< tr>
< th>标题< / th>
< th>金额< / th>
< th>开始日期< / th>
< th>出价< / th>
< th>结束日期< / th>
< th>< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td>标致406汽车出售< / 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> 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>五公顷耕地出租< / 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 ++）{
//遍历行
//行将通过row变量访问分配给for循环
var endDate = row.cells [4];
countDownDate = new Date（endDate.innerHTML.replace（/ - / g，/））。getTime（）;
var countDown = row.cells [5];
//每1秒更新一次计数
var x = setInterval（
function（）{
//获取今天的日期和时间
var now = new Date（）。getTime（）;
//查找现在倒数日期之间的距离
var distance = countDownDate - now;
//时间计算天数，小时数，分钟数和秒数
var days = Math.floor（距离/（1000 * 60 * 60 * 24））;
var hours = Math.floor（（距离％ （1000 * 60 * 60 * 24））/（1000 * 60 * 60））;
var minutes = Math.floor（（距离％（1000 * 60 * 60））/（1000 * 60）
var seconds = Math.floor（（距离％（1000 * 60））/ 1000）;
//在元素
countDown中显示结果。 innerHTML =（days +d+ hours +h
+ minutes +m+ seconds +s）;
//如果倒数结束，一些文本
if（距离<0）{
clearInterval（x）;
countDown.innerHTML =出价关闭;
}
}，1000）;
}
< / script>
计时器工作正常，但只填充表格最后一行的最后一行的倒计时。 / p>
我查过了，但无法弄清楚为什么它不会填充以前的行。
任何帮助将不胜感激。
解决方案
我只需在 setInterval 函数内运行循环，而不是循环内的 setInterval 函数。
< script>
var table = document.getElementById（bidsTable）;
var x = setInterval（
function（）{
for（var i = 1，row; row = table.rows [i]; i ++）{
//遍历行
//行将通过for循环中分配的row变量来访问
var endDate = row.cells [4];
countDownDate = new Date（endDate.innerHTML.replace（/ - / g，/））。getTime（）;
var countDown = row.cells [5];
//更新每1秒倒计数
//获取今天的日期和时间
var now = new Date（）。getTime（）;
//找到现在是倒数日期
var distance = countDownDate - now;
//天，小时，分和秒的时间计算
var days = Math.floor（距离/ （1000 * 60 * 60 * 24））;
var hours = Math.floor（（距离％（1000 * 60 * 60 * 24））/（1000 * 60 * 60））;
var minutes = Math.floor（（距离％（1000 * 60 * 60））/（1000 * 60））;
var seconds = Math.floor（（距离％（1000 * 60））/ 1000）;
//显示元素
的结果countDown.innerHTML =（天+d+小时+小时
+分钟+m +秒+s）;
//如果倒数结束，写一些文本
if（distance <0）{
clearInterval（x）;
countDown.innerHTML =出价关闭;
}
}
}，1000）;
< / script>
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.
解决方案
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>
这篇关于为html表格中的每一行添加倒计时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
