Generate a table?

Discussion in 'JavaScript' started by zk0, Feb 20, 2007.

0
  1. #1
    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>
    Code (markup):
    What I have understood so far you need to use some kind of array? Please tell me if I am completely lost! :confused:
     
    zk0, Feb 20, 2007 IP
  2. designcode

    designcode Well-Known Member

    Messages:
    738
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    118
    #2
    You want to generate a table with JS?

    use
    document.write('<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>');
     
    designcode, Feb 20, 2007 IP
  3. zk0

    zk0 Peon

    Messages:
    299
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks, but not like that.

    Im more thinking of having some sort of array with a bunch of inormation, like the html code in my first post, that writes out the information sorted in an array.
     
    zk0, Feb 20, 2007 IP
  4. rgchris

    rgchris Peon

    Messages:
    187
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Look up multi-dimensional arrays. That'll probably point you in the right direction.
     
    rgchris, Feb 20, 2007 IP
  5. nico_swd

    nico_swd Prominent Member

    Messages:
    4,153
    Likes Received:
    344
    Best Answers:
    18
    Trophy Points:
    375
    #5 
    
<body>
</body>

<script type="text/javascript">

var rows = new Array(
	new Array('Title 1', 'Title 2', 'Title 3'),
	new Array('name', 'info', 'number'),
	new Array('name', 'info', 'number'),
	new Array('name', 'info', 'number')
);


var table = document.createElement('table');
table.setAttribute('width', '300');

for (var i = 0; i < rows.length; i++)
{
	var row = table.insertRow(0);
	
	if (i % 2 != 0)
	{
		row.setAttribute('bgcolor', '#CCCCCC');
	}
	
	var cell1 = row.insertCell(0);
	var cell2 = row.insertCell(1);
	var cell3 = row.insertCell(2);

	cell1.innerHTML = rows[i][0];
	cell2.innerHTML = rows[i][1];
	cell3.innerHTML = rows[i][2];
	
	table.appendChild(row);
}

document.body.appendChild(table);


</script>
    Code (javascript):
     
    nico_swd, Feb 20, 2007 IP
  6. zk0

    zk0 Peon

    Messages:
    299
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thank you. I think this is what I am looking for.

    Wow, that was fast. But Im looking more for something like this:

    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>");
}
    Code (markup):
    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!
     
    zk0, Feb 21, 2007 IP
  7. zk0

    zk0 Peon

    Messages:
    299
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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);
    Code (markup):
    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:
     
    zk0, Feb 21, 2007 IP
  8. zk0

    zk0 Peon

    Messages:
    299
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #8
    This problem is solved. Thanks!
     
    zk0, Feb 22, 2007 IP