在javascript中为表保留空间

我有一个按钮，它将使用javascript删除表行。对我来说效果很好，但是当它被删除/添加时，空间会被其他行占用

如果表不存在或以后添加，我们如何使它稳定、不消耗

var countDownDate=新日期（“2019年4月29日23:56:26”）.getTime（）；
var table=document.getElementById（“测试”）；
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；
函数stime（）{
//每1秒更新一次倒计时
x=设置间隔（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
cell1.innerHTML=天+天+小时+小时+分钟+米+秒+秒；
如果（距离<0）{
净间隔（x）；
document.getElementById（“计时器”）.innerHTML=“过期”；
}
}, 1000);
}
函数hide（）{
净间隔（x）；
表1删除行（1）；
}

.timer\u bg{
背景色：红色；
颜色：白色；
}

隐藏
开始时间

您是否尝试过使用css属性

可见性：隐藏

Visibility:hidden

将隐藏内容，但保留空白

此问题建议使用

jquery

。如果您想继续使用纯

javascript

，以下是帮助您的解决方案：

步骤1

创建两个类名（

可见和
隐藏）的样式：

步骤2

将
class
和
id
添加到第一行，即
row1
：

row1.className = 'hidden';
row1.id = 'timer';

步骤3A

当您想显示剩余时间或其他信息时，将第1行的级别更改为可见：

document.getElementById("timer").setAttribute('class', 'visible');

步骤3B

将类
hidden
添加到要隐藏的行，此处
row2
：

row2.className = 'hidden';

工作演示

假设您在项目中使用了
bootstrap
，为了更好地理解，我在演示中添加了
bootstrap

为了更好地理解代码的位置，我还在代码前面添加了一条注释，这些代码由我添加/编辑


var countDownDate=新日期（“2019年4月29日23:56:26”）.getTime（）；
var table=document.getElementById（“测试”）；
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=‘隐藏’；//CJ在SO上添加了代码
row1.id='计时器'；//CJ在SO上添加了代码
cell2.innerHTML=“Text1”；
cell3.innerHTML=“Text2”；
var x；
函数stime（）{
//每1秒更新一次倒计时
x=设置间隔（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
document.getElementById（“计时器”）.setAttribute（“类”，“可见”）；//由CJ在SO上添加代码
cell1.innerHTML=天+天+小时+小时+分钟+米+秒+秒；
如果（距离<0）{
净间隔（x）；
document.getElementById（“计时器”）.innerHTML=“过期”；
}
}, 1000);
}
函数hide（）{
净间隔（x）；
row2.className='hidden'；//由CJ在SO上添加代码
}
/*CJ在SO开始时添加代码*/
.隐藏{
可见性：隐藏；
}
.可见{
可见性：可见！重要
}
/*CJ在SO端添加代码*/



隐藏
开始时间
css中的不透明度设置为0可能是最好的选择，如果您可以在可能的重复之后恢复它，那么当它被删除时，您想显示空白吗？@Huangism是的，我想要空白。请查看重复问题，您可以创建css类，并在需要时添加/删除该类
row2.className = 'hidden';