Generate a table?

zk0 · 02-20-2007, 08:17 PM

I know it's possible to generate a table. But how do you do? Can anyone guide me in the right direction to create a table like this one using javascript:

Code:

<table width="300" cellspacing="0">
  <thead>
	<tr>
		<td>Titel 1</td>
		<td>Titel 2</td>
		<td>Titel 3</td>
	</tr>
</thead>
  <tr bgcolor="#CCCCCC"> 
    <td>Name</td>
    <td>info</td>
    <td>Number</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>info</td>
    <td>Number</td>
  </tr>
  <tr bgcolor="#CCCCCC"> 
    <td>Name</td>
    <td>info</td>
    <td>Number</td>
  </tr>
</table>

What I have understood so far you need to use some kind of array? Please tell me if I am completely lost!

chump2877 · 02-20-2007, 09:49 PM

I think you should read this post.

And if you have dynamic data that needs to be inserted into your table, where is that data coming from (i.e., XML file or database)? The kind of data source will dictate how you display your data inside your table (with Javascript or any other scripting language).

Again, I would recommend against using JS to display data, since none of the data will display if JS is disabled. Also, your table and the data inside of it will not appear in your HTML markup this way (so, for one, it will be invisible to search engines). I would probably use PHP instead here to read and display my data.

zk0 · 02-21-2007, 10:51 AM

Thanks "chump2877"!

What i have learned so far I need to show the content with Multi-Dimensional Arrays.

Code:

Brady = new Array(3) for (i = 0; i < Brady.length; ++ i)
	Brady [i] = new Array(3);
	
Brady [0] [0] = "Titel 1";
Brady [0] [1] = "Titel 2";
Brady [0] [2] = "Titel 3";
Brady [1] [0] = "Jan";
Brady [1] [1] = "Alice";
Brady [1] [2] = "Peter";
Brady [2] [0] = "Cindy";
Brady [2] [1] = "Mike";
Brady [2] [2] = "Bobby";

function print_2d_string_array(array) 
{ 
	document.writeln ("<table border>") ;
	var row; for (row = 0; row < ; 			
	array.length; ++row)
	{ 
		document.writeln (" <tr>");
			var col for (col = 0; col < array
	 		[row].length; ++col) 
			document.writeln (" <td>" + array
				[row] [col] + "</td>"); 
			document.writeln (" </tr>"); 
	} 
	document.writeln ("</table>");
}

This code is what I got so far.

PROBLEMS:
I need to figure out how to make the titels be displayed as <th> tags.
And I need to display everything too.

I am happy for any help I can get!

Mr J · 02-21-2007, 02:35 PM

Here's one possibility

PHP Code:


			
<HTML>

<HEAD>

<TITLE>Document Title</TITLE>



<script type="text/javascript">



myTitle=["Name","Info","Number"]

arr=["Jan","Alice","Peter","Cindy","Mike","Bobby","Jeff","Gail","Tim"]



rowNum=4

cellNum=3



function createTable(){

count1=0

count2=cellNum



newTable=document.createElement('TABLE')

newTable.setAttribute("id","mytable")

newTable.setAttribute("border","1")



newTBody=document.createElement('TBODY')



for(var i=0;i<rowNum;i++){

newRow=document.createElement("TR")



for(var j=count1;j<count2;j++){



if(i==0){

newCell=document.createElement("TH")

newCellText=document.createTextNode(myTitle[j])

}

else{

newCell=document.createElement("TD")

newCellText=document.createTextNode(arr[j])

}



newCell.appendChild(newCellText)

newRow.appendChild(newCell)

}



newTBody.appendChild(newRow)



if(i!=0){

count1+=cellNum

count2+=cellNum

}

}



newTable.appendChild(newTBody)

document.getElementById("d1").appendChild(newTable)

}



</script>



</HEAD>

<BODY  onload="createTable()">



<div id="d1"></div>



</BODY>

</HTML>

zk0 · 02-21-2007, 10:13 PM

Okey Im getting there slowly:

Code:

cell = new Array (4); // Fyra rows
for (i = 0; i < cell . length; ++ i)
	cell [i] = new Array (3); // Tre columns

		cell[0][0] = "Title 1";
		cell[0][1] = "Title 2";
		cell[0][2] = "Title 3";
		cell[1][0] = "Name";
		cell[1][1] = "ID";
		cell[1][2] = "Number";
		cell[2][0] = "Name";
		cell[2][1] = "ID";
		cell[2][2] = "Number";
		cell[3][0] = "Name";
		cell[3][1] = "ID";
		cell[3][2] = "Number";

function generateTable (array)
{
	document.write("<table width=\"250\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">");
	var row;
	
	// th taggen
	
	for (row = 0; row < array . length; ++ row)
	{
		document.write(" <tr>");
		var col;
		for (col = 0; col < array [row] . length; ++ col)
			document.write("  <th bgcolor=\"#dddddd\">" + array [row] [col] + "</th>");
		document.write(" </tr>");
	}
	
	/////////////////////////////////////////////////////
	
	for (row = 1; row < array . length; ++ row)
	{
		document.write(" <tr>");
		var col;
		for (col = 0; col < array [row] . length; ++ col)
			document.write("  <td bgcolor=\"#eeeeee\">" + array [row] [col] + "</td>");
		document.write(" </tr>");
	}
	document.write("</table>");
}

generateTable (cell);

As you can see in the code I am trying to seperate the title array to be showned as a <th> tag. The rest should be displayed as <td> tags. But I havent yet figured out how...

Mr J · 02-21-2007, 10:58 PM

Is it a necessity to use document.write?

Here's a slight improvement on my last post

PHP Code:


			
<HTML>

<HEAD>

<TITLE>Document Title</TITLE>



<script type="text/javascript">





arr=[

["Name","Info","Number"],

["Name 1","ID 1","Number 1"],

["Name 2","ID 2","Number 2"],

["Name 3","ID 3","Number 3"]

]



rowNum=4

cellNum=3



function createTable(){

count1=0

count2=cellNum



newTable=document.createElement('TABLE')

newTable.setAttribute("id","mytable")

newTable.setAttribute("border","1")



newTBody=document.createElement('TBODY')



for(var i=0;i<rowNum;i++){

newRow=document.createElement("TR")



for(var j=0;j<arr[i].length;j++){



if(i==0){

newCell=document.createElement("TH")

newCellText=document.createTextNode(arr[i][j])

}

else{

newCell=document.createElement("TD")

newCellText=document.createTextNode(arr[i][j])

}



newCell.appendChild(newCellText)

newRow.appendChild(newCell)

}



newTBody.appendChild(newRow)



}



newTable.appendChild(newTBody)

document.getElementById("d1").appendChild(newTable)

}



</script>



</HEAD>

<BODY  onload="createTable()">



<div id="d1"></div>



</BODY>

</HTML>

zk0 · 02-21-2007, 11:23 PM

Quote:

Originally Posted by Mr J

Is it a necessity to use document.write?

Here's a slight improvement on my last post

PHP Code:


			
<HTML>

<HEAD>

<TITLE>Document Title</TITLE>



<script type="text/javascript">





arr=[

["Name","Info","Number"],

["Name 1","ID 1","Number 1"],

["Name 2","ID 2","Number 2"],

["Name 3","ID 3","Number 3"]

]



rowNum=4

cellNum=3



function createTable(){

count1=0

count2=cellNum



newTable=document.createElement('TABLE')

newTable.setAttribute("id","mytable")

newTable.setAttribute("border","1")



newTBody=document.createElement('TBODY')



for(var i=0;i<rowNum;i++){

newRow=document.createElement("TR")



for(var j=0;j<arr[i].length;j++){



if(i==0){

newCell=document.createElement("TH")

newCellText=document.createTextNode(arr[i][j])

}

else{

newCell=document.createElement("TD")

newCellText=document.createTextNode(arr[i][j])

}



newCell.appendChild(newCellText)

newRow.appendChild(newCell)

}



newTBody.appendChild(newRow)



}



newTable.appendChild(newTBody)

document.getElementById("d1").appendChild(newTable)

}



</script>



</HEAD>

<BODY  onload="createTable()">



<div id="d1"></div>



</BODY>

</HTML>

Thanks, but that is too advanced for me right now. I want to somehow learn to code it myself.

Can you please tell me what kind of direction I should go with my current code?

Thanks a million times!

Mr J · 02-22-2007, 02:16 PM

Try this

PHP Code:


			
<script type="text/javascript"> 



cellData = new Array()

cellData[0]=new Array() 

cellData[0][0] = "Title 1"

cellData[0][1] = "Title 2"

cellData[0][2] = "Title 3"



cellData[1]=new Array() 

cellData[1][0] = "Name 1"

cellData[1][1] = "ID 1"

cellData[1][2] = "Number 1"



cellData[2]=new Array() 

cellData[2][0] = "Name 2"

cellData[2][1] = "ID 2"

cellData[2][2] = "Number 2"



cellData[3]=new Array() 

cellData[3][0] = "Name 3"

cellData[3][1] = "ID 3"

cellData[3][2] = "Number 3"



function generateTable(){ 

document.write('<table width="250" border="1" cellpadding="0" cellspacing="0">')



for(var rowNum=0;rowNum<cellData.length;rowNum++){



document.write('<tr>')



for(var cellNum = 0; cellNum < cellData[rowNum].length; cellNum++){ 



if(rowNum==0){

document.write('<th>' + cellData[rowNum][cellNum] + '</th>')

}

else{

document.write('<td>' + cellData[rowNum][cellNum] + '</td>')

}



}



document.write('</tr>')



} 



document.write('</table>')



} 



generateTable()

</script>  





</BODY>

</HTML>

zk0 · 02-22-2007, 02:54 PM

Hmm thanks but that isn't what I am needing.

I am almost finished with my script now. The only problem I have now is that I need to make every second row in a darker background color.

I have commented in the code where I am having this problem:

Code:

 <script>

cell = new Array (4); // Fyra rows
for (i = 0; i < cell . length; ++ i)
	cell [i] = new Array (3); // Tre columns

		cell[0][0] = "Title 1";
		cell[0][1] = "Title 2";
		cell[0][2] = "Title 3";
		cell[1][0] = "Name";
		cell[1][1] = "ID";
		cell[1][2] = "Number";
		cell[2][0] = "Name";
		cell[2][1] = "ID";
		cell[2][2] = "Number";
		cell[3][0] = "Name";
		cell[3][1] = "ID";
		cell[3][2] = "Number";

function generateTable (array)
{
	//////////////////////////////////////////////////////////////////////////////////////////
	// creates the table ////////////////////////////////////////////////////////////////

	document.write("<table width=\"250\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">");
	var row;
	
	//////////////////////////////////////////////////////////////////////////////////////////
	// this part will show the titles and the th tags ////////////////////////////////////////
	
	for (row = 0; row <= 0; row++)
	{
		document.write(" <tr>");
		var col;
		for (col = 0; col < array [row] . length; ++ col)
			document.write("  <th>" + array [row] [col] + "</th>");
		document.write(" </tr>");
	}
	
	//////////////////////////////////////////////////////////////////////////////////////////
	// This is the part I am having problems with. It's suppose to show every second as a ////
	// darker background /////////////////////////////////////////////////////////////////////
	
	//for (i=2; i<=row + 1; i++)
	for (row = 1; row < array . length; ++ row)
{
    document.write('<tr>');

    for (j=2; j<=col + 1; j++)
    {
        if (j % 2 == 0)
            document.write(" <td bgcolor=\"#ffffff\">" + array [row] [col] + "</td>");
        else
            document.write(" <td bgcolor=\"#eeeeee\">" + array [row] [col] + "</td>");
    }

    document.write('</tr>');
}
	
	//////////////////////////////////////////////////////////////////////////////////////////
	// This shows the information - will be deleted when I get the above code to work! ///////
	
	for (row = 1; row < array . length; ++ row)
	{
		document.write(" <tr>");
		var col;
		for (col = 0; col < array [row] . length; ++ col)
			document.write("  <td bgcolor=\"#eeeeee\">" + array [row] [col] + "</td>");
		document.write(" </tr>");
	}
	document.write("</table>");
	
}

generateTable (cell);

 </script>

Mr J · 02-22-2007, 05:12 PM

Quote:

Hmm thanks but that isn't what I am needing.

Is this a school assignment because you seem intent on using that code

You asked

Quote:

Can anyone guide me in the right direction to create a table like this one using javascript:

Document,write is not the way to go and you have not amended your script to reflect anything shown in my previous posts

zk0 · 02-22-2007, 06:12 PM

Quote:

Originally Posted by Mr J

Is this a school assignment because you seem intent on using that code

You asked

Document,write is not the way to go and you have not amended your script to reflect anything shown in my previous posts

Hi,

Yes this is a school assignment. Thats why I dont want to use your codes. As I said before:

Quote:

I want to somehow learn to code it myself.

Im only asking for directions, tips and hints on how to solve the problem. Maybe some sample code snippets. I dont want you to code everything.

Arbitrator · 02-22-2007, 07:53 PM

Quote:

Originally Posted by zk0

Thats why I dont want to use your codes. As I said before:

Quote:

I want to somehow learn to code it myself.

You could learn how to code it yourself using methods described at QuirksMode: W3C DOM Compatibility - Core. document.write() requires that you put your scripts inline, which is poor practice, and doesn’t work with XML languages like XHTML.

Mr J · 02-22-2007, 08:21 PM

The code in post #8 is your code with a few minor amendments.

You would benefit more by learning todays methods rather than using out dated ones.

You only need to apply the colour changes to the row and not to each td cell

if(rowNum % 2 == 0){
document.write('<tr style="background-color:#ffffff">')
}
else{
document.write('<tr style="background-color:#eeeeee">')
}