Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    zk0
    zk0 is offline
    New Coder
    Join Date
    Dec 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Generate a table?

    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!

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,827
    Thanks
    19
    Thanked 157 Times in 148 Posts
    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.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #3
    zk0
    zk0 is offline
    New Coder
    Join Date
    Dec 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #5
    zk0
    zk0 is offline
    New Coder
    Join Date
    Dec 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #7
    zk0
    zk0 is offline
    New Coder
    Join Date
    Dec 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mr J View Post
    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!

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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 0cellNum cellData[rowNum].lengthcellNum++){ 

    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> 
    Last edited by Mr J; 02-22-2007 at 08:10 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #9
    zk0
    zk0 is offline
    New Coder
    Join Date
    Dec 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #11
    zk0
    zk0 is offline
    New Coder
    Join Date
    Dec 2006
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mr J View Post
    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.

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by zk0 View Post
    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. document.write() requires that you put your scripts inline, which is poor practice, and doesn’t work with XML languages like XHTML.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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">')
    }
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •