我有一个按钮,可以使用 javascript 删除表格行。对我来说效果很好,但是当它被删除/添加时,其他行占用了空间。
如果该表不存在或稍后添加,我们如何使该表稳定,不消耗?
var countDownDate = new Date("Apr 29, 2019 23:56:26").getTime();
var table = document.getElementById("test");
var row1 = table.insertRow(0);
var row2 = table.insertRow(1);
var row3 = table.insertRow(2);
//row.className = 'timer_bg';
var cell1 = row1.insertCell(0);
var cell2 = row2.insertCell(0);
var cell3 = row3.insertCell(0);
cell2.innerHTML = "Text1";
cell3.innerHTML = "Text2";
var x;
function stime() {
// Update the count down every 1 second
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);
cell1.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
}
function hide() {
clearInterval(x);
table.deleteRow(1);
}
.timer_bg {
background-color: red;
color: white;
}
<table id="test" class="table table-bordered table-responsive">
</table>
<br />
<button onclick="hide()">Hide</button>
<button onclick="stime()">Start time</button>
演示:
页面加载时:
r1 (blank)
r2 (text1)
r3 (text2)
点击开始时间
时:
r1 (time left)
r2 (text1)
r3 (text2)
点击隐藏
时:
r1 (time left)
r2 (blank)
r3 (text2)
更新
我知道如何处理id/class
,感谢this answer , 但在我的表中 tr/td
中没有id/class
如何在未定义 id/class
的情况下使用 javascript 在表中执行此操作?
最佳答案
建议duplicate question因为这个问题使用了jquery
。如果您想继续使用纯javascript
,这里是在Huangism's Comment 帮助下的解决方案。 :
第一步
创建两个类名的样式(visible
和hidden
):
.hidden {
visibility: hidden;
}
.visible {
visibility: visible !important
}
第 2 步
将 class
和 id
添加到您的第一行,即 row1
:
row1.className = 'hidden';
row1.id = 'timer';
步骤 3A
当您想显示剩余时间或其他内容时,将 row1
的类更改为 visible
:
document.getElementById("timer").setAttribute('class', 'visible');
步骤 3B
将class hidden
添加到要隐藏的行,这里是row2
:
row2.className = 'hidden';
工作演示
假设您在项目中使用bootstrap
,为了更好地理解,我在演示中添加了bootstrap
。
我还在代码前添加了注释,这些代码是我添加/编辑的,以便更好地理解代码的位置。
var countDownDate = new Date("Apr 29, 2019 23:56:26").getTime();
var table = document.getElementById("test");
var row1 = table.insertRow(0);
var row2 = table.insertRow(1);
var row3 = table.insertRow(2);
var cell1 = row1.insertCell(0);
var cell2 = row2.insertCell(0);
var cell3 = row3.insertCell(0);
row1.className = 'hidden'; // Added codes by CJ on SO
row1.id = 'timer'; // Added codes by CJ on SO
cell2.innerHTML = "Text1";
cell3.innerHTML = "Text2";
var x;
function stime() {
// Update the count down every 1 second
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);
document.getElementById("timer").setAttribute('class', 'visible'); // Added codes by CJ on SO
cell1.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
}
function hide() {
clearInterval(x);
row2.className = 'hidden'; // Added codes by CJ on SO
}
/* Adding of codes by CJ on SO starts */
.hidden {
visibility: hidden;
}
.visible {
visibility: visible !important
}
/* Adding of codes by CJ on SO ends */
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<table id="test" class="table table-bordered table-responsive">
</table>
<br />
<button onclick="hide()">Hide</button>
<button onclick="stime()">Start time</button>
关于javascript - 在javascript中为表保留空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50104018/