Reserve space for the table in javascript

Question

I have a button which will remove the table row using javascript. Worked well for me, but when it is removed/added that space is consumed by other rows.

How can we make that table stable, no consuming if it is not there or if it is added later?

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>

Demonstration:

When Page loads:

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

When Start Time clicked:

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

When Hide clicked:

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

UPDATE

I know how to do with id/class, appreciated this answer, but in my table there are no id/class in tr/td

How to do that in the table using javascript where no id/class defined?

You're probably best off just setting the opacity to 0 in css if you might restore it after — Dominic, Apr 30 '18 at 15:56
Possible duplicate of [Hide div but keep the empty space](https://stackoverflow.com/questions/16316431/hide-div-but-keep-the-empty-space) — Guillaume Georges, Apr 30 '18 at 16:03
Please look at duplicate question, you can create a css class and just add/drop the class when needed — Huangism, Apr 30 '18 at 16:15
@Huangism and all are requested to have a look at the updated question. — Raja, Apr 30 '18 at 16:57
Target the row you need to delete, instead of deleting, add a class (class is to set visibility) or you can set visibility in js — Huangism, Apr 30 '18 at 18:04

score 1 · Accepted Answer · answered May 01 '18 at 06:50

The suggested duplicate question for this question has a use of jquery. If you want to continue with pure javascript here is the solution with the help of Huangism's Comment:

STEP 1

Creating the style of two class names (visible and hidden):

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

STEP 2

Adding class and id to your first row i.e row1:

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

STEP 3A

Changing class of row1 to visible when you want to display your time left or whatever:

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

STEP 3B

Adding class hidden to the row which you want to hide, here row2:

row2.className = 'hidden';

WORKING DEMO

Assuming you are using bootstrap in your project, I have added bootstrap in the demo for better understanding.

I have also added a comment in front of codes which were added/edited by me for a better understanding of the placement of codes.

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>

score 0 · Answer 2 · edited Apr 30 '18 at 19:00

0

Have you tried using the css property visibility:hidden?

Visibility:hidden will hide the content but reserve whitespace.

edited Apr 30 '18 at 19:00

Chirag Jain

1,367
1
11
27

answered Apr 30 '18 at 16:51

ArabianMaiden

505
7
24

Reserve space for the table in javascript

2 Answers2