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 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    DOM Table Creation

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

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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.
    Code:
    <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>
    Last edited by TinyScript; 04-04-2009 at 05:13 PM.

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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")";

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I would need the whole code to test it. I figured you'd be able to change that part

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    anchor.href = "javascript:methodOne("+zxc2+")"; should work

  • Users who have thanked TinyScript for this post:

    PGARCHA (04-04-2009)

  • #6
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Mate, that works perfectly!
    Just want to say a big thanks, you've been a great help!
    Cheers!

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by PGARCHA View Post
    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.

  • #8
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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
    Code:
    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>

  • #9
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    This what you mean? the pics are a.jpg b.jpg....

    Code:
    <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>

  • #10
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I'm sensing this might be what you're after

    Code:
    <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>

  • #11
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    this has to be it
    works in ff didn't test IE

    Code:
    <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>

  • #12
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Hey, I got your first code working too! LOL


    Code:
    <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>

  • #13
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

    Quote Originally Posted by TinyScript View Post
    this has to be it
    works in ff didn't test IE

    Code:
    <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>

  • #14
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Ah ha! I see. that's easy too.

    Code:
    <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>

  • #15
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    lol nice one


  •  

    Posting Permissions

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