Html & Javascript hiding existing table cells without destroying them

Question

I've got the jscript working that adds row to the page on click, what I need to do now is to hide the bottom most cell each time the remove button is clicked, BUT the cell can't be destroyed because if cells are added later, any previously populated cell has to show back up untouched. My plan was that I could just put the body's child nodes into an array, start at the end on the array and work toward the front and change the first visible node that I come across to hidden and then return, seemingly this would do what I need done, but for some reason my function is producing any result....at all, no errors, no infinite loops, no nothing. I'll post my code below. The issue is, unless there's a careless mistake somewhere, in the removeFields() function. I'm stumped.

CSS:

body{
  background-color: #2a334d;
  font: 15px/1.5 Arial, Helvetica, sans-serif;
}

.container{
  padding:45px;
  width:80%;
  color:#e8491d;
  border-color: #ffffff;
  border-width: medium;
  border:solid;
  min-height: none;
}
table{
  align-content: center;
  width:80%;
  margin-bottom: 35px;
  padding-left: 175px;
}
.shown{
  visibility: visible;
}
.hidden{
  visibility: hidden;
}
footer{
  padding:10px;
  margin-top:50px;
  color: #ffffff;
  text-align: center;
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css"></link>
    <script type="text/javascript" src="functions.js"></script>
    <title>assignment 3</title>
  </head>

  <body id="body">
    <div class="container">
      <table id="test" class="centered">
        <th>Number</th>
        <th>Text</th>
        <th>Length</th>
        <tr id="table" class="shown">
          <th><a id="number">1</a></th>
          <th><input id="text" onkeyup="countLength()"></input></th>
          <th><span id="length">0</span></th>
        </tr>
      </table>
      <footer>
        <tr>
          <button class="addElement" onclick="addField('table')">add</button>
          <button class="removeElement" onclick="removeField()">remove</button>
          <button class="sortElements" onclick="sortFields()">sort</button>
        </tr>
      </footer>
    </div>
  </body>
</html>

JAVASCRIPT:

var fieldCount = 1;

function countLength(){
  for(i= 0; i< fieldCount; i++){
    document.getElementsByTagName('span')[i].innerHTML=document.getElementsByTagName('input')[i].value.length;
  }
}

function addField(){
  var array = document.body.childNodes;
  for(i = 0; i< array.length ; i++){
    if(array[i].className == "hidden"){
      array[i].className = 'shown';
      return;
    }
  }
  var lastTr = document.getElementById("table");
  var cloneTr = lastTr.cloneNode(true);

  cloneTr.getElementsByTagName('a')[0].innerHTML = fieldCount+1;
  cloneTr.getElementsByTagName('input')[0].value = '';
  cloneTr.getElementsByTagName('span')[0].innerHTML = 0;
  document.getElementById("test").append(cloneTr);
  document.getElementsByTagName('input')[fieldCount].addEventListener("keyup", countLength());
  document.getElementsByTagName('input')[fieldCount].className = "shown";

  fieldCount++;
  }

  function removeField(){
    var array = document.body.childNodes;

    for(var tmp = array.length-1; tmp>=0 ; tmp--){
      if(array[tmp].className == "shown"){
        array[tmp].className = 'hidden';
        return;
      }
    }
  }

Too much code... please give a live example on jsfiddle or so... if you want to hide one cell, you should use `visibility:hidden;` so the table would stay the way it was formatted before — Flash Thunder, Feb 28 '17 at 18:37
See http://stackoverflow.com/questions/6242976/javascript-hide-show-element — Zak, Feb 28 '17 at 18:38
`document.body.childNodes` is `[
]`. Use `document.querySelectorAll('.shown')` instead. — Justin Taddei, Feb 28 '17 at 18:40
Also, instead of `if(array[tmp].className == "shown")` use `if(array[tmp].classList.contains('shown'))`. `if(array[tmp].className == "shown")` can be easily broken. — Justin Taddei, Feb 28 '17 at 18:41

Phil · Accepted Answer · 2017-02-28T19:10:01.983

Your method for determining which cell should be hidden is not working. The line array[tmp].className == "shown" is never returning true, since array[tmp].className has a value of undefined on each instance of the loop, except when looking at the div.

Also, it looks like document.body.childNodes is only getting the direct descendants of the body elements, not all descendants, so it's never seeing the tr elements, which is most likely the reason it's not working.

To address this, you want to loop over the child elements of your table instead, like this:

var table = document.getElementById("test"); var array = table.childNodes;

And in your CSS, use display:none instead of visibility:hidden

Incidentally, each tr element has the same id value. id should be unique within a page.

thanks man, i never wouold have gotten that. new to html and script — Tucker, Feb 28 '17 at 19:44

Html & Javascript hiding existing table cells without destroying them

1 Answers1