DOM Table Creation

[PGARCHA]

Hi
At the moment this method just creates normal table cells, can someone help me make it create cells with an image which is clickable from my other table command i have used before
I would like it to create something like this:

<td><a href="javascript:methodOne(0)"><img src="desktop/image1.jpg" width=50 height=50></a> </td>

This is the code that will work if you test it, but its not what I want

<script>
function DOM(obj,id){
 var tar=document.getElementById(id);
 for (var zxc0=0;zxc0<obj.selectedIndex;zxc0++){
  var table=document.createElement('TABLE');
  table.border='1';
  var tbdy=document.createElement('TBODY');
  table.appendChild(tbdy);
  for (var zxc1=0;zxc1<1;zxc1++){
   var tr=document.createElement('TR');
   tbdy.appendChild(tr); 
   for (var zxc2=0;zxc2<3;zxc2++){
    var td=document.createElement('TD');
    td.width='100';
    td.appendChild(document.createTextNode(zxc2));
    tr.appendChild(td); 

   } 
  }
  tar.appendChild(table);
 }
}
</script>
<select onchange="DOM(this,'target');" >
<option >DOM Method</option>
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
<option >6</option>
</select>
<div id="target" ></div>

please help.

[TinyScript]

you have all the tools you need. make an achor tag maybe called anchor and td.appendChild(anchor) and make an image tag maybe called pic then anchor.appendChild(pic)

be sure to set the src of the pic and set the height.
pic.src="image.jpg";
pic.setAttribute("width","50");
pic.setAttribute("height","50");

for some reason I can't get IE to size the images, but that's that crazy IE for you!!

UPDATE: LOL that crazy IE. I was trying to set the width and height before setting the source. Silly me to think it could figure out what pic I wanted to size.

<script>
function DOM(obj,id){
 var tar=document.getElementById(id);
 for (var zxc0=0;zxc0<obj.selectedIndex;zxc0++){
  var table=document.createElement('TABLE');
  table.border='1';
  var tbdy=document.createElement('TBODY');
  table.appendChild(tbdy);
  for (var zxc1=0;zxc1<1;zxc1++){
   var tr=document.createElement('TR');
   tbdy.appendChild(tr); 
   for (var zxc2=0;zxc2<3;zxc2++){
    var td=document.createElement('TD');
    td.width='100';
    td.appendChild(document.createTextNode(zxc2));
    tr.appendChild(td); 
var anchor=document.createElement('A');
anchor.href="page"+zxc2+".html";
td.appendChild(anchor);

var pic=document.createElement('IMG');

   // pic.width="50px";
 //pic.height="50px";
pic.src="image.jpg";
pic.setAttribute("width", "50");
pic.setAttribute("height", "50");
//alert(pic.width);
    anchor.appendChild(pic); 

   } 
  }
  tar.appendChild(table);
 }
}
</script>
<select onchange="DOM(this,'target');" >
<option >DOM Method</option>
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
<option >6</option>
</select>
<div id="target" ></div>

[PGARCHA]

hey, thx alot! amazing that worked perfectly except im having the issue with the
'href' link

for example in your anchor tag you have
anchor.href="page"+zxc2+".html";

but when the image is clicked I want it too call a function/method in my javascript called methodOne. I have tried the following but they dont work :S

Is it not possible to achieve what i want then?

anchor.href = "javascript:methodOne(zxc2)";
anchor.href = javascript:methodOne(zxc2);
anchor.href = "javascript:methodOne("zxc2")";

[TinyScript]

I would need the whole code to test it. I figured you'd be able to change that part

[TinyScript]

anchor.href = "javascript:methodOne("+zxc2+")"; should work

[PGARCHA]

Mate, that works perfectly!
Just want to say a big thanks, you've been a great help!
Cheers!

[TinyScript]

Mate, that works perfectly!
Just want to say a big thanks, you've been a great help!
Cheers!

Hey, I learned a few things too, so a big thanks to you as well.

[PGARCHA]

hey, sorry, i have a problem..the above solution wont work properly as the rows are just being copied from the first row which makes the method it calls useless as only the top row is changed and not the others. So I have decided to switch to this style where they are created seperately.
Again as before im not sure how to make it so my method and image are in the table.

<td><a href="javascript:methodOne(n)"><img src="desktop/image1.jpg" width=50 height=50></a> </td>

placed in the creation of the cells somewhere in the code below

function table(){
var r=document.forms[0].elements[0].value;
var c=document.forms[0].elements[1].value;
var z=new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p')
var stbl='<TABLE BORDER=1><TBODY>';var n=0;
for(j=0;j<r;j++){stbl+=' <TR>';
for(i=0;i<c;i++,n++){stbl+='<TD>'+z[n]+'</TD>';}
stbl+='</TR>'}
stbl+='</TBODY></TABLE>';
document.getElementById('theTable').innerHTML=stbl;

}
</script>

<form><input value=2 size=1 onchange="table()"><input value=4 size=1 onchange="table()"></form>

[TinyScript]

This what you mean? the pics are a.jpg b.jpg....

<script>
function table(){
var r=document.forms[0].elements[0].value;
var c=document.forms[0].elements[1].value;
var z=new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p')
var stbl='<TABLE BORDER=1><TBODY>';var n=0;
for(j=0;j<r;j++){stbl+=' <TR>';
for(i=0;i<c;i++,n++){stbl+='<TD><img src="'+z[n]+'.jpg"></TD>';}
stbl+='</TR>'}
stbl+='</TBODY></TABLE>';
document.getElementById('theTable').innerHTML=stbl;

}
</script>

<form><input value=2 size=1 onchange="table()"><input value=4 size=1 onchange="table()"></form>
<div id="theTable"></div>

[TinyScript]

I'm sensing this might be what you're after

<script>
function table(){
var r=document.forms[0].elements[0].value;
var c=document.forms[0].elements[1].value;
var z=new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p')
var stbl='<TABLE BORDER=1><TBODY>';var n=0;
for(j=0;j<r;j++){stbl+=' <TR>';
for(i=0;i<c;i++){stbl+='<TD>'+j+''+z[i]+'<img src="'+j+''+z[i]+'.jpg"></TD>';}
stbl+='</TR>'}
stbl+='</TBODY></TABLE>';
document.getElementById('theTable').innerHTML=stbl;

}
</script>

<form><input value=2 size=1 onchange="table()"><input value=4 size=1 onchange="table()"></form>
<div id="theTable"></div>

[TinyScript]

this has to be it
works in ff didn't test IE

<script>
function table(){
var r=document.forms[0].elements[0].value;
var c=document.forms[0].elements[1].value;
var z=new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p')
var stbl='<TABLE BORDER=1><TBODY>';var n=0;
for(j=0;j<r;j++){stbl+=' <TR>';
for(i=0;i<c;i++,n++){stbl+='<TD>'+z[n]+'<a href=javascript:methodOne('+n+')><img src=desktop/image1.jpg width=50 height=50></a></TD>';}
stbl+='</TR>'}
stbl+='</TBODY></TABLE>';
document.getElementById('theTable').innerHTML=stbl;

}

function methodOne(num){alert(num)}
</script>

<form><input value=2 size=1 onchange="table()"><input value=4 size=1 onchange="table()"></form>
<div id="theTable"></div>

[TinyScript]

Hey, I got your first code working too! LOL

<script>
function DOM(obj,id){
 var tar=document.getElementById(id);
tar.innerHTML="";/*this is clearing when the function runs. if you want to keep making more you need to remove that line*/
 for (var i=0;i<1;i++){
  var table=document.createElement('TABLE');
  table.border='1';
  var tbdy=document.createElement('TBODY');
  table.appendChild(tbdy);
  for (var ii=0;ii<obj.selectedIndex;ii++){
   var tr=document.createElement('TR');
   tbdy.appendChild(tr); 
   for (var iii=0;iii<obj.selectedIndex;iii++){
    var td=document.createElement('TD');
    td.width='100';
td.appendChild(document.createTextNode(ii));
    tr.appendChild(td); 
    td.appendChild(document.createTextNode(iii));
    tr.appendChild(td); 
var anchor=document.createElement('A');
anchor.href="javascript:click("+ii+""+iii+")";
td.appendChild(anchor);

var pic=document.createElement('IMG');

   // pic.width="50px";
 //pic.height="50px";
pic.src=""+ii+""+iii+"image.jpg";
pic.setAttribute("width", "50");
pic.setAttribute("height", "50");
//alert(pic.width);
    anchor.appendChild(pic); 

   } 
  }
  tar.appendChild(table);
 }
}

function click(num){alert(num)}
</script>
<select onchange="DOM(this,'output');" >
<option >DOM Method</option>
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
<option >6</option>
</select>
<div id="output" ></div>

[PGARCHA]

Mate, I went with this one and it works exactly how i wanted it!
Perfecto once more!

I looked at the one in your last post except their is a problem as i will try and explain.
Says its a 3x3 table created.
For example when click box in row1column1 the method called would be
MethodOne(0) as it is which is right.
Except for example row2column1 would call function called with parameter (21) which is wrong, it should be (4).
I hope that makes sense.


I dont think it matters much because this method is shorter and easier to understand

this has to be it
works in ff didn't test IE

<script>
function table(){
var r=document.forms[0].elements[0].value;
var c=document.forms[0].elements[1].value;
var z=new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p')
var stbl='<TABLE BORDER=1><TBODY>';var n=0;
for(j=0;j<r;j++){stbl+=' <TR>';
for(i=0;i<c;i++,n++){stbl+='<TD>'+z[n]+'<a href=javascript:methodOne('+n+')><img src=desktop/image1.jpg width=50 height=50></a></TD>';}
stbl+='</TR>'}
stbl+='</TBODY></TABLE>';
document.getElementById('theTable').innerHTML=stbl;

}

function methodOne(num){alert(num)}
</script>

<form><input value=2 size=1 onchange="table()"><input value=4 size=1 onchange="table()"></form>
<div id="theTable"></div>

[TinyScript]

Ah ha! I see. that's easy too.

<script>
function DOM(obj,id){
var count=0;
 var tar=document.getElementById(id);
tar.innerHTML="";
 for (var i=0;i<1;i++){
  var table=document.createElement('TABLE');
  table.border='1';
  var tbdy=document.createElement('TBODY');
  table.appendChild(tbdy);
  for (var ii=0;ii<obj.selectedIndex;ii++){
   var tr=document.createElement('TR');
   tbdy.appendChild(tr); 
   for (var iii=0;iii<obj.selectedIndex;iii++){

    var td=document.createElement('TD');
    td.width='100';
td.appendChild(document.createTextNode(count));
    tr.appendChild(td); 
   
var anchor=document.createElement('A');
anchor.href="javascript:click("+count+")";
td.appendChild(anchor);

var pic=document.createElement('IMG');

   // pic.width="50px";
 //pic.height="50px";
pic.src=""+ii+""+iii+"image.jpg";
pic.setAttribute("width", "50");
pic.setAttribute("height", "50");
//alert(pic.width);
    anchor.appendChild(pic); 
count++;
   } 
  }
  tar.appendChild(table);
 }
}

function click(num){alert(num)}
</script>
<select onchange="DOM(this,'output');" >
<option >DOM Method</option>
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
<option >6</option>

</select>
<div id="output" ></div>

[PGARCHA]

lol nice one