javascript - 在javascript中为表保留空间

标签 javascript html

我有一个按钮,可以使用 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 帮助下的解决方案。 :

第一步

创建两个类名的样式(visiblehidden):

.hidden {
visibility: hidden;
}
.visible {
visibility: visible !important
}

第 2 步

classid 添加到您的第一行,即 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/

相关文章:

javascript - 正则表达式允许 10 - 15 数字字符串内有 0 到 5 个连字符?

javascript - 图片库中的图片定位

javascript - TypeScript 中的接口(interface)和类

javascript - 将值从 ajax 传递到 php 类函数

javascript - 自动缓存新补丁

javascript - 将内容添加到 div 使其向下移动?

javascript - 请求刷新页面

javascript - Twilio - 排队调用,然后出队但我该如何回答?

html - 如何仅将背景应用于特定元素?

jquery - 如何垂直翻转进度条?