Add and Remove Items Dynamically

[Total: 0    Average: 0/5]

This example will hide or show rows in a table based upon user input.

Body Code:


.des      {font-family:verdana;font-size:9pt;
a:link    {color:#ff0000;text-decoration:none}
a:visited {color:#ff0000;text-decoration:none;}
a:hover   {color:#000000;text-decoration:none;}
<Strong class="des"> Click on the Superstar Name to disappear</strong>
<table border=1 width=100% cellpadding=0 cellspacing=0 class="des">
var Iitems = new Array("HHH","The Rock","UnderTaker","Chris Benoit","Edge","Pipers Pit")
/* Script to Show Items */
for(i=0; i<=Iitems.length-1; i++) {
  document.write("<tr><td bgcolor=#abcdef><div id="+i+" onClick=document.getElementById("+eval('i')+").style.display='none'><a href='#'>"+Iitems[i]+"</a></td></div></tr>")
document.write("<tr><td><b> Retrieve > </b>")

/* Script for Retrieval */
var Jitems = new Array("HHH","The Rock","UnderTaker","Chris Benoit","Edge","Pipers Pit")
for(j=0; j<=Jitems.length-1; j++) {
  document.write("<a href='#' onClick=document.getElementById("+eval('j')+").style.display='Block'> " + Jitems[j] + " | </a>")

/* function to Bring all back */
function bringBack() {
  for(b=0; b<=Jitems.length-1; b++) {
    document.getElementById(b).style.display = "Block"

/* function to make all invisable */
function disappear() {
for(b=0; b<=Jitems.length-1; b++) {
document.getElementById(b).style.display = "none"
<tr><td><a href="javaScript:bringBack()">Retrieve all</a></td></tr>
<tr><td><a href="javaScript:disappear()">Remove all</a></td></tr>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *