...

View Full Version : Dealing with mulitple tables in Javascript - functions aren't working!



icklechurch
03-19-2009, 05:36 PM
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:


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

TinyScript
03-19-2009, 05:55 PM
this works. I can't think of another way unless you build in a test for the IDs



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

icklechurch
03-19-2009, 06:01 PM
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!

Kor
03-19-2009, 06:03 PM
If you know the tables ids:


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;
}
}
}

icklechurch
03-19-2009, 06:51 PM
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>

TinyScript
03-19-2009, 06:59 PM
http://i40.tinypic.com/ilzrqx.jpg

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum