...

View Full Version : How do i use a loop to create a table?



SpiritualStorms
08-10-2004, 02:59 PM
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:


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?

dumpfi
08-10-2004, 03:23 PM
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

SpiritualStorms
08-10-2004, 03:29 PM
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.


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.

glenngv
08-10-2004, 03:30 PM
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:


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

dumpfi
08-10-2004, 03:33 PM
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. :D

SpiritualStorms
08-10-2004, 04:50 PM
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?

Willy Duitt
08-10-2004, 04:55 PM
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

SpiritualStorms
08-10-2004, 04:57 PM
What about a div inside each cell? Would that work? Or would it collapse anyway?

Willy Duitt
08-10-2004, 05:02 PM
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. :D

.....Willy

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

SpiritualStorms
08-10-2004, 05:06 PM
LOL......

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum