...

View Full Version : Generate a table?



zk0
02-20-2007, 09: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:


<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! :confused:

chump2877
02-20-2007, 10:49 PM
I think you should read this post (http://www.codingforums.com/showthread.php?t=106689&highlight=striping+table).

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, 11:51 AM
Thanks "chump2877"!

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


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.

:confused:

I am happy for any help I can get!

Mr J
02-21-2007, 03:35 PM
Here's one possibility


<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, 11:13 PM
Okey Im getting there slowly:


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... :confused:

Mr J
02-21-2007, 11:58 PM
Is it a necessity to use document.write?

Here's a slight improvement on my last post


<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-22-2007, 12:23 AM
Is it a necessity to use document.write?

Here's a slight improvement on my last post


<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, 03:16 PM
Try this



<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, 03: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:


<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, 06:12 PM
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


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, 07:12 PM
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:


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, 08:53 PM
Thats why I dont want to use your codes. As I said before:


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 (http://www.quirksmode.org/dom/w3c_core.html). 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, 09: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">')
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum