Question

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

我们怎样才能使该表稳定，如果不存在则不消耗或稍后添加？

＆＃13;

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);
}

＆＃13;

.timer_bg {
  background-color: red;
  color: white;
}

＆＃13;

<table id="test" class="table table-bordered table-responsive">

</table>
<br />
<button onclick="hide()">Hide</button>
<button onclick="stime()">Start time</button>

＆＃13;

演示：

加载页面时

r1 (blank)
r2 (text1)
r3 (text2)

点击Start Time时：

r1 (time left)
r2 (text1)
r3 (text2)

点击Hide时：

r1 (time left)
r2 (blank)
r3 (text2)

更新

我知道如何处理id/class，感谢this answer，但在我的表格中，id/class 没有tr/td >

如何在表格中使用没有定义id/class的javascript进行此操作？

Answer 1

此问题的建议duplicate question使用jquery。如果您想继续纯javascript ，请在Huangism's Comment的帮助下找到解决方案：

第1步

创建两个类名称的样式（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步

将班级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>

Answer 2

您是否尝试过使用css属性visibility:hidden？

Visibility:hidden将隐藏内容但保留空白。

在javascript中为表保留空间

2 个答案: