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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do i use a loop to create a table?

    I want to create a function that writes to a div area a Table. I want to basically create 64 cells, 8 rows down, and 8 columns across. But i dont have an idea of how to do the first loop, much less the nested loop. Here's my attempt:

    Code:
    function displayBoard(){
    
    var tbl_tags="<Table bgcolor='lightyellow'>"
    
    var area=document.getElementById('field');
    
    for(i=0; i<=8; i++){
    
    tbl_tags+="<tr><td" + i + ">" + i + "</" + i + "td></tr>";
    
    for(j=0; j<=8; j++){
    tbl_tags+="<tr" + j+ "><td>" + "</td><" + j + "/tr>";
    }
    }
    
    tbl_tags+="</table>";
    
    area.innerHTML=tbl_tags;
    }
    Any ideas?
    LovesWar

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Code:
    function displayBoard() {
      var i, y, td, tr, table = document.createElement('table'), area = document.getElementById('field');
      table.style.backgroundColor = 'lightyellow';
      for(i = 0; i < 8; i++) {
        tr = document.createElement('tr');
        for(y = 0; y < 8; y++) {
          td = document.createElement('td');
          td.appendChild(document.createTextNode(i * 8 + y + 1));
          tr.appendChild(td);
        }
        table.appendChild(tr);
      }
      while(area.childNodes.length) {
        area.removeChild(area.firstChild);
      }
      area.appendChild(table);
      if(typeof(document.all) != 'undefined' && typeof(window.opera) == 'undefined') area.innerHTML = area.innerHTML;
    }
    dumpfi

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    UUmmmmm, can you do it without the complicated version you created? I am not up to nodes, and the what not. Would like to stick to the for loops until i get better. My table function sort of works, but not totally.

    Code:
    function displayBoard(){
    
    var area=document.getElementById('field');
    
    var tbl_tags="<Table bgcolor='lightyellow'>";
    
    for(i=0; i<=7; i++){
    
    tbl_tags+="<tr><td" + i + "> dove </" + i + "td></tr>";
    
    for(j=0; j<=7; j++){
    tbl_tags+="<tr" + j+ "><td> love </td></"+j+"tr>";
     }
    }
    
    
    tbl_tags+="</table>";
    
    area.innerHTML=tbl_tags;
    }
    The wierd part is, that it writes a table with 64 cells, but the first part writes dove 8 times stacked one on top of the other, then the table with the word love is written.
    LovesWar

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    function displayBoard(){
      var tbl_tags='<table style="background-color:lightyellow">'
      for(i=0; i<8; i++){
         tbl_tags+='<tr>\n';
         for(j=0; j<8; j++){
            tbl_tags+='<td id="' + i + '_' + j + '">' + i + '_' + j + '</td>\n';
         }
    
         tbl_tags+='</tr>\n';
      }
      tbl_tags+="</table>";
      document.getElementById('field').innerHTML=tbl_tags;
    }
    That produces this:
    Code:
    <table style="background-color:lightyellow">
    <tr>
    <td id="0_0">0_0</td>
    <td id="0_1">0_1</td>
    <td id="0_2">0_2</td>
    ...up to 0_7
    </tr>
    <tr>
    <td id="1_0">1_0</td>
    <td id="1_1">1_1</td>
    <td id="1_2">1_2</td>
    ...up to 1_7
    </tr>
    
    ...
    
    <td id="7_0">7_0</td>
    <td id="7_1">7_1</td>
    <td id="7_2">7_2</td>
    ...up to 7_7
    </tr>
    </table>
    I put the id as i_j, I thought this will serve a purpose in your board game (?).
    I also put that as the content of the cell as I don't exactly know what your script is all about.

    I typed slow. Posted this without seeing the 2 replies above.

  • #5
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Code:
    function displayBoard() {
      var i, y, table = '<table style="background-color:lightyellow">', area = document.getElementById('field');
      for(i = 0; i < 8; i++) {
        table += '<tr>';
        for(y = 0; y < 8; y++) {
          table += '<td>love</td>';
        }
        table += '</tr>';
      }
      area.innerHTML = table + '</table>';
    }
    dumpfi

    Edit: Now, i was too slow.
    Last edited by dumpfi; 08-10-2004 at 02:36 PM.

  • #6
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there a way of holding the table cells with certain dimensions without using content inside the cells themselves? In other words, can i assign a height, and width dimension without having to write anything side them?
    LovesWar

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SpiritualStorms
    Is there a way of holding the table cells with certain dimensions without using content inside the cells themselves? In other words, can i assign a height, and width dimension without having to write anything side them?
    You need to at least hard code a non-breaking space (&nbsp;) in each empty data cell to keep the cell from collapsing....

    .....Willy

  • #8
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What about a div inside each cell? Would that work? Or would it collapse anyway?
    LovesWar

  • #9
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SpiritualStorms
    What about a div inside each cell? Would that work? Or would it collapse anyway?
    How about you try that and then come back and tell us if it worked.

    .....Willy

    But I'll give you a hint. Empty is empty as empty is empty....

  • #10
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    LOL......

    Hey Willie, do you know the name of the thread where i asked you about Net? Did you reply to it?
    LovesWar


  •  

    Posting Permissions

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