next up previous
Next: Week -5 - Regular Up: Computer Science 1 Previous: Week 3 Data structures:

Week 4 Lab - Manipulating the DOM

Help with the Contacts List Assignement:
  1. Try: 
    <!DOCTYPE html>
<html lang="en">
    <head>
  	<script>
   		function makeTable(n,m,where,border)
		{
		  var table=document.createElement("TABLE"); 
		  table.setAttribute("border",border);
	          for (var i=0;i<n;i++)
		  {
			var tr1=document.createElement("TR");   
		        for (var j=0;j<m;j++)
			{	  
		           var td1=document.createElement("TD");
			   var text1=document.createTextNode("BLA");
		           td1.appendChild(text1);	
			   tr1.appendChild(td1); 
			}
		  	table.appendChild(tr1);
		  }
		
		  var z=document.getElementById(where);
		  z.appendChild(table);
		 }
	</script>
   
    </head>
   
   <body onload="makeTable(3,7,'here',5)">
           <h1 align="center">Contacts List Version 1</h1> 
          <div id="here" align="center"></div>
          <div align="center"> <button id="run" type="button">Save </button> </div>
  </body>
</html>

    See waht happens when you fiddle with <body onload="makeTable(3,7,'here',5)">

  2. Now Try: 
    <!DOCTYPE html>
<html lang="en">
    <head>
  
    <script>
   	
	
	        function makeTable(n,m,where,border)
		{
			
			var table=document.createElement("TABLE"); 
		        table.setAttribute("border",border);
		  for (var i=0;i<n;i++)
		  {
			
			var tr1=document.createElement("TR");   
		        for (var j=0;j<m;j++)
			{	  
		           var td1=document.createElement("TD");
			   td1.x=i;
			   td1.y=j;
			   var text1=document.createElement("INPUT");
		           td1.appendChild(text1);	
			   tr1.appendChild(td1); 
			}
		  	table.appendChild(tr1);
		   }
		
		     var z=document.getElementById(where);
		     z.appendChild(table);
		}
	
	</script>
   
    </head>
   
   <body onload="makeTable(3,4,'here','it',5)">
   
   <h1 align="center">Contacts List Version 2 ('input's instead  of text)</h1> 
   
   
   
   
        
   
   <div id="here" align="center"></div>
   
   
   <div align="center"> <button id="run" type="button">bla?</button> </div>
   
    </body>
</html>
    This has inputs instead of text nodes.

  3. Now we add some buttons (that don't do anything!) 
    <!DOCTYPE html>
<html lang="en">
    <head>
  
    <script>
   	
	
	function makeTable(n,m,where,border)
		{
			var table=document.createElement("TABLE"); 
		        table.setAttribute("border",border);
		  for (var i=0;i<n;i++)
		  {
			var tr1=document.createElement("TR");   
		        for (var j=0;j<m;j++)
			{	  
		           var td1=document.createElement("TD");
			   var text1=document.createElement("INPUT");
		           td1.appendChild(text1);	
			   tr1.appendChild(td1); 
			}
			var but=document.createElement("BUTTON");
		  	var butText=document.createTextNode("delete");
			but.appendChild(butText); 
			tr1.appendChild(but); 
			table.appendChild(tr1);
		      }
		
		     var z=document.getElementById(where);
		     z.appendChild(table);
		     return array;
		  
		}
	
	</script>
   
    </head>
   
   <body onload="makeTable(3,4,'here',5)">
   
   <h1 align="center">Contacts List Version 3 (delete buttons added)</h1> 
   
   <div id="here" align="center"></div>
   
   
   <div align="center"> <button id="run" type="button">save</button> </div>
   
    </body>
</html>

  4. Now we store the values of the lements ofthe table in an array. Wehn we click on the button it alerts one of the values. 
    <!DOCTYPE html>
<html lang="en">
    <head>
  
    <script>
   	var array = [];
	
	function makeTable(n,m,where,border)
		{
			
			var table=document.createElement("TABLE"); 
		        table.setAttribute("border",border);
		  for (var i=0;i<n;i++)
		  {
			array[i]=[];
			var tr1=document.createElement("TR");   
		        for (var j=0;j<m;j++)
			{	  
		           var td1=document.createElement("TD");
			   var text1=document.createElement("INPUT");
		           td1.appendChild(text1);	
			   array[i][j]=td1;
			   tr1.appendChild(td1); 
			}
			var but=document.createElement("BUTTON");
		  	var butText=document.createTextNode("delete");
			but.appendChild(butText); 
			tr1.appendChild(but); 
			table.appendChild(tr1);
		      }
		
		     var z=document.getElementById(where);
		     z.appendChild(table);
		    
		  
		}
	
	</script>
   
    </head>
   
   <body onload="makeTable(3,4,'here','it',5)">
   
   <h1 align="center">Contacts List Version 4 (storing table elements in array)</h1> 
   
    <div id="here" align="center"></div>
   
   
   <div align="center"> <button id="run" onClick="alert(array[0][0].childNodes[0].value)" type="button">Fill top left cell and click this</button> </div>
   
    </body>
</html>
  5. Now we are adding localstorage. We can store and retrieve data from local storage. 
    <!DOCTYPE html>
<html lang="en">
    <head>
  
    <script>
   	var array = [];
	var entryObject={first:"     ",second:"    ",phone:"     ",email:"    "};
	
	function init()
	{
		var x=[];
		if (localStorage.getItem('contacts')==null) x=[];
		else x= JSON.parse(localStorage.getItem('contacts'));
		x.push(entryObject);
	       makeTable('here','it',5,x)
	}
	
	
	function entry(a,b,c,d)
	{
		this.first=a;
		this.second=b;
		this.phone=c;
		this.email=d;
	}

	
	function updateLocalStorage()
	{
		var aaa=[];
		
		for (var i=0;i<array.length;i++)
		{
		   var z=entryObject;
		   z=new entry(
		   array[i]['first'].childNodes[0].value,
		   array[i]['second'].childNodes[0].value,
		   array[i]['phone'].childNodes[0].value,
		   array[i]['email'].childNodes[0].value)
		   
		   aaa.push(z);
		}	
	    localStorage.setItem('contacts',JSON.stringify(aaa));    
	    x= JSON.parse(localStorage.getItem('contacts'));
	    init();
	}
	
	
	function makeTable(where,id,border,contactArray)
		{
			
			var table=document.createElement("TABLE"); 
		        table.setAttribute("id",id);
		  	table.setAttribute("border",border);
		  for (var i=0;i<contactArray.length;i++)
		  {
			array[i]=[];
			var tr1=document.createElement("TR");   
		        for (var j=0 in entryObject)
			{	  
		           var td1=document.createElement("TD");
			   var text1=document.createElement("INPUT");
		           text1.value=contactArray[i][j];
			   td1.appendChild(text1);	
			   
			   array[i][j]=td1;
			   tr1.appendChild(td1); 
			}
			var but=document.createElement("BUTTON");
		  	var butText=document.createTextNode("delete");
			but.appendChild(butText); 
			tr1.appendChild(but); 
			table.appendChild(tr1);
		   }
		
		     var z=document.getElementById(where);
		     if (z.childNodes.length>0)
		     {var k=z.firstChild;
		     z.removeChild(k);}
		     z.appendChild(table);
		     return array;
		  
		}
	
	</script>
   
    </head>
   
   <body onload="init()">
   
   <h1 align="center">Contacts List Version 6 (Making table from Local Storage)</h1> 
   
   
   
   
        
   
   <div id="here" align="center"></div>
   
   
   <div align="center"> <button id="run" onClick="updateLocalStorage();" type="button">Save</button> </div>
  
  <div align="center"> <button id="clear" onClick="localStorage.clear();init();" type="button">clear</button> </div> 
    </body>
</html>

  6. Finally, we make the delete buttons work: 
    <!DOCTYPE html>
<html lang="en">
    <head>
  
    <script>
   		
   	var array = [];
	var entryObject={first:"     ",second:"    ",phone:"     ",email:"    "};
	var table;
	var tr=[];
	
	
	function init()
	{
		var x=[];array=[];
		if (localStorage.getItem('contacts')==null) x=[];
		else x= JSON.parse(localStorage.getItem('contacts'));
		x.push(entryObject);
	       makeTable('here','it',5,x)
	}
	
	
	function entry(a,b,c,d)
	{
		this.first=a;
		this.second=b;
		this.phone=c;
		this.email=d;
	}

	
	function updateLocalStorage()
	{
		var aaa=[];
		
		for (var i=0;i<array.length;i++)
		{
		   var z=new entry(
		   array[i]['first'].childNodes[0].value,
		   array[i]['second'].childNodes[0].value,
		   array[i]['phone'].childNodes[0].value,
		   array[i]['email'].childNodes[0].value)
		   
		   aaa.push(z);
		}	
	    localStorage.setItem('contacts',JSON.stringify(aaa));    
	    x= JSON.parse(localStorage.getItem('contacts'));
	    init();
	}
	
	
	function remove(n)
	{
		
		table.removeChild(tr[n]);
		for (var i=n+1;i<array.length;i++)
		{
		   array[i-1]=array[i];	
		}
	        array.pop();
		
	}
	
	function makeTable(where,id,border,contactArray)
		{
			
			table=document.createElement("TABLE"); 
		        table.setAttribute("id",id);
		  	table.setAttribute("border",border);
		  for (var i=0;i<contactArray.length;i++)
		  {
			array[i]=[];
			tr[i]=document.createElement("TR");   
		        for (var j=0 in entryObject)
			{	  
		           var td1=document.createElement("TD");
			   var text1=document.createElement("INPUT");
		           text1.value=contactArray[i][j];
			   td1.appendChild(text1);	
			   
			   array[i][j]=td1;
			   tr[i].appendChild(td1); 
			}
			var but=document.createElement("BUTTON");
		  	var butText=document.createTextNode("delete");
			but.appendChild(butText); 
			but.val=i;
			but.addEventListener('click', function(){remove(this.val);} ,false)
			tr[i].appendChild(but); 
			table.appendChild(tr[i]);
		   }
		
		     var z=document.getElementById(where);
		     if (z.childNodes.length>0)
		     {var k=z.firstChild;
		     z.removeChild(k);}
		     z.appendChild(table);
		     return array;
		  
		}
	
	</script>
   
    </head>
   
   <body onload="init()">
   
   <h1 align="center">Contacts List Version 7</h1> 
   
   
   
   
        
   
   <div id="here" align="center"></div>
   
   
   <div align="center"> <button id="run" onClick="updateLocalStorage();" type="button">Save</button> </div>
  
  <div align="center"> <button id="clear" onClick="localStorage.clear();init();" type="button">clear</button> </div> 
    </body>
</html>

  7. Change the contact list so that it only keeps rows where the first and second names are not blank.


s.danicic@gold.ac.uk
Sebastian Danicic BSc MSc PhD (Reader in Computer Science)
Dept of Computing, Goldsmiths, University of London, London SE14 6NW
Last updated 2012-07-03