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 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    96
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Dealing with mulitple tables in Javascript - functions aren't working!

    Hi,

    I'm creating a table where each row offers different pricing options. I want the user to be able to click on a row, and that row is then selected and the price appears at the bottom of the table. I have developed the following code (which works!) for one table:
    Code:
    <script type="text/javascript">
    function setEvent(){
    var rows=document.getElementById('mytab').getElementsByTagName('tr'), i=1, r;
    while(r=rows[i++]){
    i<rows.length?r.onclick=doActions:null;
    }
    function doActions(){
    var rows=this.parentNode.getElementsByTagName('tr'), i=1, r, c, v;
    var th=this.parentNode.parentNode.getElementsByTagName('th');
    while(r=rows[i++]){
    if(r==this){
    r.style.backgroundColor='#ccc';
    c=this.getElementsByTagName('td');
    v=c[c.length-1].firstChild.data;
    th[th.length-1].getElementsByTagName('p')[0].firstChild.data=v;
    }
    else{r.style.backgroundColor=''}
    }
    }
    }
    onload=setEvent;
    </script>                                     
    <table cellpadding="3" cellspacing="1" class="basket_options_table" id="mytab">
    	<tr>
    		<tr>
                 <th>Usage</th>
                 <th>Resolution</th>
                 <th>File Size</th>
                 <th>Price</th>
            </tr>                                       
       </tr>
       
       <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
                  <td>FREE</td>   
                  <td>320 x 288 pixels</td>   
                  <td>size</td>   
                  <td>&pound;0</td>   
       </tr>
       <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
                  <td>Personal Use</td>   
                  <td>320 x 288 pixels</td>   
                  <td>size</td>   
                  <td>&pound;5</td>   
       </tr>
       <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
                  <td>Commercial Use</td>   
                  <td>720 x 576 pixels</td>   
                  <td>size</td>   
                  <td>&pound;10</td>   
       </tr>
       <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
                  <td>Broadcast/ Publishing</td>   
                  <td>720 x 576 pixels</td>   
                  <td>size</td>   
                  <td>&pound;15</td>   
       </tr>
       <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'">
                  <td>Custom</td>   
                  <td>720 x 576 pixels</td>   
                  <td>size</td>   
                  <td>&pound;20</td>   
       </tr>
       <tr>
                  <th colspan="3"></th>
                  <th class="basket_record_price">
                  <p>&pound;</p>
                  </th>
       </tr>
    </table>
    BUT the webpage loads up multiple tables for all the different products. Therefore, I need to addd sth to the 'mytab' part such as 'mytab1' or sth similar. I can't work out how to do this within a function. Please help!!
    Last edited by Kor; 03-19-2009 at 04:59 PM. Reason: wrap the code [code][/code]

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    this works. I can't think of another way unless you build in a test for the IDs

    Code:
    <script type="text/javascript">
    function setEvent(){
    var rows=document.getElementById('mytab').getElementsByTagName('tr'), i=1, r;
    
    while(r=rows[i++]){
    i<rows.length?r.onclick=doActions:null;
    }
    
    
    function doActions(){
    var rows=this.parentNode.getElementsByTagName('tr'), i=1, r, c, v;
    
    var th=this.parentNode.parentNode.getElementsByTagName('th');
    while(r=rows[i++]){
    if(r==this){
    r.style.backgroundColor='#ccc';
    c=this.getElementsByTagName('td');
    v=c[c.length-1].firstChild.data;
    th[th.length-1].getElementsByTagName('p')[0].firstChild.data=v;
    }	else{
    r.style.backgroundColor=''
    			}
    		}
    	}
    
    }
    
    function setEvent2(){
    var rows2=document.getElementById('mytab2').getElementsByTagName('tr'), i=1, r;
    
    while(r=rows2[i++]){
    i<rows2.length?r.onclick=doActions:null;
    }
    
    
    function doActions(){
    var rows2=this.parentNode.getElementsByTagName('tr'), i=1, r, c, v;
    
    var th=this.parentNode.parentNode.getElementsByTagName('th');
    while(r=rows2[i++]){
    if(r==this){
    r.style.backgroundColor='#ccc';
    c=this.getElementsByTagName('td');
    v=c[c.length-1].firstChild.data;
    th[th.length-1].getElementsByTagName('p')[0].firstChild.data=v;
    }	else{
    r.style.backgroundColor=''
    			}
    		}
    	}
    
    }
    
    onload=setEvent;
    </script>
    <body onload="setEvent();setEvent2()">
    <table cellpadding="3" cellspacing="1" class="basket_options_table" id="mytab">
    <tr>
    <tr>
    <th>Usage</th>
    <th>Resolution</th>
    <th>File Size</th>
    <th>Price</th>
    </tr>
    </tr>
    
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>FREE</td>
    <td>320 x 288 pixels</td>
    <td>size</td>
    <td>&pound;0</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Personal Use</td>
    <td>320 x 288 pixels</td>
    <td>size</td>
    <td>&pound;5</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Commercial Use</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;10</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Broadcast/ Publishing</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;15</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'">
    <td>Custom</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;20</td>
    </tr>
    <tr>
    <th colspan="3"></th>
    <th class="basket_record_price">
    <p>&pound;</p>
    </th>
    </tr>
    </table>
    
    
    
    <table cellpadding="3" cellspacing="1" class="basket_options_table" id="mytab2">
    <tr>
    <tr>
    <th>Usage</th>
    <th>Resolution</th>
    <th>File Size</th>
    <th>Price</th>
    </tr>
    </tr>
    
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>FREE</td>
    <td>320 x 288 pixels</td>
    <td>size</td>
    <td>&pound;0</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Personal Use</td>
    <td>320 x 288 pixels</td>
    <td>size</td>
    <td>&pound;5</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Commercial Use</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;10</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Broadcast/ Publishing</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;15</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'">
    <td>Custom</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;20</td>
    </tr>
    <tr>
    <th colspan="3"></th>
    <th class="basket_record_price">
    <p>&pound;</p>
    </th>
    </tr>
    </table>

  • Users who have thanked TinyScript for this post:

    icklechurch (03-19-2009)

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    96
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Cool, I was trying to think of something similar but a bit more automated.

    Basically, the rest of the code on the page is producing x number of tables where x is the number of different products in the basket. x could go up 100 so I don't want to code that 100 times...

    is there no way to put in some sort of cheat where you jsut put the number of the end? For example...

    function setEvent<?=$id?>(){
    var rows2=document.getElementById('mytab<?=$id?>').getElementsByTagName('tr'), i=1, r;

    ...etc!...
    }

    This is driving me crazy! Thanks for the help though!

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    If you know the tables ids:
    Code:
    function setEvent(){
    var ids=['mytable','mysecondtable','thirdtable'];// tables' ids
    for(var j=0;j<ids.length;j++){
    var rows=document.getElementById(ids[j]).getElementsByTagName('tr'), i=1, r;
    while(r=rows[i++]){
    i<rows.length?r.onclick=doActions:null;
    }
    }
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    TinyScript (03-19-2009)

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    96
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks, nearly there! The code sits within a foreach loop where the product id for each iteration is given so I have the following, which only works for the last table...which is weird because looking at the source, all seems to be well....

    <script type="text/javascript">
    function setEvent(){
    var ids=[<?=$record["product_id"]?>];// tables' ids
    for(var j=0;j<ids.length;j++){
    var rows=document.getElementById(ids[j]).getElementsByTagName('tr'), i=1, r;
    while(r=rows[i++]){
    i<rows.length?r.onclick=doActions:null;
    }
    }
    function doActions(){
    var rows=this.parentNode.getElementsByTagName('tr'), i=1, r, c, v;
    var th=this.parentNode.parentNode.getElementsByTagName('th');
    while(r=rows[i++]){
    if(r==this){
    r.style.backgroundColor='#ccc';
    c=this.getElementsByTagName('td');
    v=c[c.length-1].firstChild.data;
    th[th.length-1].getElementsByTagName('p')[0].firstChild.data=v;
    }
    else{r.style.backgroundColor=''}
    }
    }
    }
    onload=setEvent;
    </script>
    <table cellpadding="3" cellspacing="1" class="basket_options_table" id="<?=$record["product_id"]?>">
    <tr>
    <tr>
    <th>Usage</th>
    <th>Resolution</th>
    <th>File Size</th>
    <th>Price</th>
    </tr>
    </tr>

    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>FREE</td>
    <td>320 x 288 pixels</td>
    <td>size</td>
    <td>&pound;0</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Personal Use</td>
    <td>320 x 288 pixels</td>
    <td>size</td>
    <td>&pound;5</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Commercial Use</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;10</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Broadcast/ Publishing</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;15</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'">
    <td>Custom</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;20</td>
    </tr>
    <tr>
    <th colspan="3"></th>
    <th class="basket_record_price">
    <p>&pound;</p>
    </th>
    </tr>
    </table>

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts

    Code:
    <script type="text/javascript">
    function setEvent(){
    var ids=['mytab','mytab2'];// tables' ids
    for(var j=0;j<ids.length;j++){
    
    var rows=document.getElementById(ids[j]).getElementsByTagName('tr'), i=1, r;
    
    while(r=rows[i++]){
    i<rows.length?r.onclick=doActions:null;
    }
    }
    
    function doActions(){
    var rows=this.parentNode.getElementsByTagName('tr'), i=1, r, c, v;
    
    var th=this.parentNode.parentNode.getElementsByTagName('th');
    while(r=rows[i++]){
    if(r==this){
    r.style.backgroundColor='#ccc';
    c=this.getElementsByTagName('td');
    v=c[c.length-1].firstChild.data;
    th[th.length-1].getElementsByTagName('p')[0].firstChild.data=v;
    }	else{
    r.style.backgroundColor=''
    			}
    		}
    	}
    
    }
    
    
    
    onload=setEvent;
    </script>
    <body onload="setEvent()">
    <table cellpadding="3" cellspacing="1" class="basket_options_table" id="mytab">
    <tr>
    <tr>
    <th>Usage</th>
    <th>Resolution</th>
    <th>File Size</th>
    <th>Price</th>
    </tr>
    </tr>
    
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>FREE</td>
    <td>320 x 288 pixels</td>
    <td>size</td>
    <td>&pound;0</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Personal Use</td>
    <td>320 x 288 pixels</td>
    <td>size</td>
    
    <td>&pound;5</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Commercial Use</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;10</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Broadcast/ Publishing</td>
    <td>720 x 576 pixels</td>
    
    <td>size</td>
    <td>&pound;15</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'">
    <td>Custom</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;20</td>
    </tr>
    <tr>
    <th colspan="3"></th>
    
    <th class="basket_record_price">
    <p>&pound;</p>
    </th>
    </tr>
    </table>
    
    
    
    <table cellpadding="3" cellspacing="1" class="basket_options_table" id="mytab2">
    <tr>
    <tr>
    <th>Usage</th>
    <th>Resolution</th>
    <th>File Size</th>
    
    <th>Price</th>
    </tr>
    </tr>
    
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>FREE</td>
    <td>320 x 288 pixels</td>
    <td>size</td>
    <td>&pound;0</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Personal Use</td>
    
    <td>320 x 288 pixels</td>
    <td>size</td>
    <td>&pound;5</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Commercial Use</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;10</td>
    </tr>
    
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'" >
    <td>Broadcast/ Publishing</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    <td>&pound;15</td>
    </tr>
    <tr class="normal" onmouseover="this.className='normalon'" onmouseout="this.className='normal'">
    <td>Custom</td>
    <td>720 x 576 pixels</td>
    <td>size</td>
    
    <td>&pound;20</td>
    </tr>
    <tr>
    <th colspan="3"></th>
    <th class="basket_record_price">
    <p>&pound;</p>
    </th>
    </tr>
    </table>


  •  

    Posting Permissions

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