Tucker Tucker -4 years ago 132
CSS Question

Html & Jscript hiding existing table cells without destroying them

so 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. ill past my code below.the issue is, unless theres a careless mistake somewhere, in the removeFields() function.im stumped

thanks in advance

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download