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 12 of 12
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts

    get data from a repeated region table

    Hi
    I have a table which is presented in a browser created from a previous page form.
    I would like to run javascript on some div elements and display a conversion of the value.
    i.e. the display is in and I need to display the $ conversion.
    There are three values to change in each table, and there are ten tables produced in the search results.

    I have applied the js so far and it returns the correct calcs, but just for the first table!! It will not go to the second table and do the same. Table two and so on will have different values to convert.

    I cannot for the life of me fathom out how to get it to do the same for each table created dynamically.
    I have tried to use if/for statements but I cannot get it right.

    example....
    Code:
    <script type="text/javascript">
             var aKs = (document.getElementById('blah').value);
    		 var aKsa = (aKs*50);
                     document.getElementById('per').innerHTML=''+aKsa+'';
             var aKs2 = (document.getElementById('save').value);
    		 var aKsa22 = (aKs2*50);
                     document.getElementById('per3').innerHTML=''+aKsa22+'';
             
             var aKs3 = (document.getElementById('rent').value);
    		 var aKsa33 = (aKs3*50);
                     document.getElementById('per2').innerHTML=''+aKsa33+'';
    </script> 
    <!--repeated region-->
    <table>
    <tr><td><div id="blah" value="10">10</div></td></tr>
    <tr><td><div id="save" value="10">10</div></td></tr>
    <tr><td><div id="rent" value="10">10</div></td></tr>
    <tr><td>$<div id="per"></div></td></tr>
    <tr><td>$<div id="per2"></div></td></tr>
    <tr><td>$<div id="per3"></div></td></tr>
    </table>
    <!-- end region-->
    The results for "per" and "per2" and "per3" will be 500 and it works just fine for table one (forgetting the actual conversion rate for now).

    I cannot get to the original form to add or create other variables as its locked via another system, and I cant query the db, and its html not php :-(

    Any help would be greatly appreciated, looking forward to your reply(ies) if you can help me.
    Cheers
    Last edited by clunky; 02-21-2008 at 06:07 AM. Reason: change title

  • #2
    New Coder
    Join Date
    Jul 2007
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts
    maybe someone can help :-|

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I would use spans and I wouldn't create my own attributes. Just use javascript to get the values. Also you need &nbsp; in the empty spans for the conversions to show up.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    window.onload = function()
    {
    	var aKs = document.getElementById('blah').firstChild.nodeValue;
    	var aKsa = aKs * 50;
    	document.getElementById('per').firstChild.nodeValue = aKsa;
    	var aKs2 = document.getElementById('save').firstChild.nodeValue;
    	var aKsa22 = aKs2 * 50;
    	document.getElementById('per3').firstChild.nodeValue = aKsa22
    	var aKs3 = document.getElementById('rent').firstChild.nodeValue;
    	var aKsa33 = aKs3 * 50;
    	document.getElementById('per2').firstChild.nodeValue = aKsa33;
    }
    </script> 
    </head>
    
    <body>
    <!--repeated region-->
    <table>
    <tr><td>€<span id="blah">10</span></td></tr>
    <tr><td>€<span id="save">10</span></td></tr>
    <tr><td>€<span id="rent">10</span></td></tr>
    <tr><td>$<span id="per">&nbsp;</span></td></tr>
    <tr><td>$<span id="per2">&nbsp;</span></td></tr>
    <tr><td>$<span id="per3">&nbsp;</span></td></tr>
    </table>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Jul 2007
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thank you for your reply, I will give that a shot and keep you posted :-)

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts
    well it works the same as my code, just displaying the data for the first table but not the subsequent tables.
    Any ideas? Cheers

  • #6
    New Coder
    Join Date
    Jul 2007
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts
    is it possible do do something like....
    put the table inside another span then do a 'for' statement so that it repeats itself for every instance of the table?
    i.e.
    Code:
    for (document.getElementById('tablespan')){
    
    run the javascript....
    
    }
    is that likely to work?
    cheers

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No that won't work. I guess I misunderstood you. It seems like you have the table that repeats so many times. If this is the case then you can't have the same id's repeating you need to append a number to them like so
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    window.onload = function()
    {
    	var tables = document.getElementsByTagName('table');
    	var count = 0;
    	for(var j = 0; j < tables.length; j++)
    	{
    		if(tables[j].className == 'convert')
    		{
    			count++;
    		}
    	}
    	for(var i = 1; i <= count; i++)
    	{
    		var aKs = document.getElementById('blah'+i).firstChild.nodeValue;
    		var aKsa = aKs * 50;
    		document.getElementById('per1-'+i).firstChild.nodeValue = aKsa;
    		var aKs2 = document.getElementById('save'+i).firstChild.nodeValue;
    		var aKsa22 = aKs2 * 50;
    		document.getElementById('per2-'+i).firstChild.nodeValue = aKsa22
    		var aKs3 = document.getElementById('rent'+i).firstChild.nodeValue;
    		var aKsa33 = aKs3 * 50;
    		document.getElementById('per3-'+i).firstChild.nodeValue = aKsa33;
    	}
    }
    </script> 
    </head>
    
    <body>
    <!--repeated region-->
    <table class="convert">
    <tr><td>€<span id="blah1">10</span></td></tr>
    <tr><td>€<span id="save1">10</span></td></tr>
    <tr><td>€<span id="rent1">10</span></td></tr>
    <tr><td>$<span id="per1-1">&nbsp;</span></td></tr>
    <tr><td>$<span id="per2-1">&nbsp;</span></td></tr>
    <tr><td>$<span id="per3-1">&nbsp;</span></td></tr>
    </table>
    <table class="convert">
    <tr><td>€<span id="blah2">10</span></td></tr>
    <tr><td>€<span id="save2">10</span></td></tr>
    <tr><td>€<span id="rent2">10</span></td></tr>
    <tr><td>$<span id="per1-2">&nbsp;</span></td></tr>
    <tr><td>$<span id="per2-2">&nbsp;</span></td></tr>
    <tr><td>$<span id="per3-2">&nbsp;</span></td></tr>
    </table>
    <table class="convert">
    <tr><td>€<span id="blah3">10</span></td></tr>
    <tr><td>€<span id="save3">10</span></td></tr>
    <tr><td>€<span id="rent3">10</span></td></tr>
    <tr><td>$<span id="per1-3">&nbsp;</span></td></tr>
    <tr><td>$<span id="per2-3">&nbsp;</span></td></tr>
    <tr><td>$<span id="per3-3">&nbsp;</span></td></tr>
    </table>
    <table class="convert">
    <tr><td>€<span id="blah4">10</span></td></tr>
    <tr><td>€<span id="save4">10</span></td></tr>
    <tr><td>€<span id="rent4">10</span></td></tr>
    <tr><td>$<span id="per1-4">&nbsp;</span></td></tr>
    <tr><td>$<span id="per2-4">&nbsp;</span></td></tr>
    <tr><td>$<span id="per3-4">&nbsp;</span></td></tr>
    </table>
    <table class="convert">
    <tr><td>€<span id="blah5">10</span></td></tr>
    <tr><td>€<span id="save5">10</span></td></tr>
    <tr><td>€<span id="rent5">10</span></td></tr>
    <tr><td>$<span id="per1-5">&nbsp;</span></td></tr>
    <tr><td>$<span id="per2-5">&nbsp;</span></td></tr>
    <tr><td>$<span id="per3-5">&nbsp;</span></td></tr>
    </table>
    <table class="convert">
    <tr><td>€<span id="blah6">10</span></td></tr>
    <tr><td>€<span id="save6">10</span></td></tr>
    <tr><td>€<span id="rent6">10</span></td></tr>
    <tr><td>$<span id="per1-6">&nbsp;</span></td></tr>
    <tr><td>$<span id="per2-6">&nbsp;</span></td></tr>
    <tr><td>$<span id="per3-6">&nbsp;</span></td></tr>
    </table>
    </body>
    </html>
    This would all probably be done on the server side more efficiently.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Jul 2007
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I will give this a bash cheers. Unfortunately I cannot get to the server side of things as it has been complied with dll's and uses custom tags to display the results in flat html.
    Its not an ideal situation, if I could change the results page to php then I would have no problems ;-)
    cheers

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Then you likely can't manipulate the HTML in which case this might work better for you.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    window.onload = function()
    {
    	var tables = document.getElementsByTagName('table');
    	for(var j = 0; j < tables.length; j++)
    	{
    		var aKs = tables[j].getElementsByTagName('td')[0].getElementsByTagName('div')[0].firstChild.nodeValue;
    		var aKsa = aKs * 50;
    		tables[j].getElementsByTagName('td')[3].getElementsByTagName('div')[0].appendChild(document.createTextNode(aKsa));
    		var aKs2 = tables[j].getElementsByTagName('td')[1].getElementsByTagName('div')[0].firstChild.nodeValue;
    		var aKsa22 = aKs2 * 50;
    		tables[j].getElementsByTagName('td')[4].getElementsByTagName('div')[0].appendChild(document.createTextNode(aKsa22))
    		var aKs3 = tables[j].getElementsByTagName('td')[2].getElementsByTagName('div')[0].firstChild.nodeValue;
    		var aKsa33 = aKs3 * 50;
    		tables[j].getElementsByTagName('td')[5].getElementsByTagName('div')[0].appendChild(document.createTextNode(aKsa33))
    	}
    }
    </script> 
    </head>
    
    <body>
    <!--repeated region-->
    <table>
    <tr><td>€<div id="blah">10</div></td></tr>
    <tr><td>€<div id="save">10</div></td></tr>
    <tr><td>€<div id="rent">10</div></td></tr>
    <tr><td>$<div id="per"></div></td></tr>
    <tr><td>$<div id="per2"></div></td></tr>
    <tr><td>$<div id="per3"></div></td></tr>
    </table>
    <table>
    <tr><td>€<div id="blah">10</div></td></tr>
    <tr><td>€<div id="save">10</div></td></tr>
    <tr><td>€<div id="rent">10</div></td></tr>
    <tr><td>$<div id="per"></div></td></tr>
    <tr><td>$<div id="per2"></div></td></tr>
    <tr><td>$<div id="per3"></div></td></tr>
    </table>
    <table>
    <tr><td>€<div id="blah">10</div></td></tr>
    <tr><td>€<div id="save">10</div></td></tr>
    <tr><td>€<div id="rent">10</div></td></tr>
    <tr><td>$<div id="per"></div></td></tr>
    <tr><td>$<div id="per2"></div></td></tr>
    <tr><td>$<div id="per3"></div></td></tr>
    </table>
    <table>
    <tr><td>€<div id="blah">10</div></td></tr>
    <tr><td>€<div id="save">10</div></td></tr>
    <tr><td>€<div id="rent">10</div></td></tr>
    <tr><td>$<div id="per"></div></td></tr>
    <tr><td>$<div id="per2"></div></td></tr>
    <tr><td>$<div id="per3"></div></td></tr>
    </table>
    <table>
    <tr><td>€<div id="blah">10</div></td></tr>
    <tr><td>€<div id="save">10</div></td></tr>
    <tr><td>€<div id="rent">10</div></td></tr>
    <tr><td>$<div id="per"></div></td></tr>
    <tr><td>$<div id="per2"></div></td></tr>
    <tr><td>$<div id="per3"></div></td></tr>
    </table>
    <table>
    <tr><td>€<div id="blah">10</div></td></tr>
    <tr><td>€<div id="save">10</div></td></tr>
    <tr><td>€<div id="rent">10</div></td></tr>
    <tr><td>$<div id="per"></div></td></tr>
    <tr><td>$<div id="per2"></div></td></tr>
    <tr><td>$<div id="per3"></div></td></tr>
    </table>
    <table>
    <tr><td>€<div id="blah">10</div></td></tr>
    <tr><td>€<div id="save">10</div></td></tr>
    <tr><td>€<div id="rent">10</div></td></tr>
    <tr><td>$<div id="per"></div></td></tr>
    <tr><td>$<div id="per2"></div></td></tr>
    <tr><td>$<div id="per3"></div></td></tr>
    </table>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Jul 2007
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi, I dont think the spans are being updated each time the table is reproduced.
    i.e. rent1 to rent2 etc therefore its erroring with object expected...
    :-)
    heh heh overlap in posts I will try your latest option now cheers

  • #11
    New Coder
    Join Date
    Jul 2007
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts
    will it matter if there are any other tables on the page, i.e these are nested?
    None of the other tables have div's so the first one it sees is rent....
    cheers

    getting "firstChild.nodeValue" is null or not an object error

    does it matter if the rent save and blah fields are in a different order?
    Last edited by clunky; 02-21-2008 at 10:19 AM.

  • #12
    New Coder
    Join Date
    Jul 2007
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Cracked it, many thanks to you, it took a while to get the display right as it was the positioning of the divs within the td's

    in case it is useful to anyone else here is the code

    Code:
    window.onload = function()
    {
    var tables = document.getElementsByTagName('table');
    
    
    	for(var j = 0; j < tables.length; j++)
    	{
    		if(tables[j].className == 'convert')
    		{
    		var aKs = tables[j].getElementsByTagName('td')[3].getElementsByTagName('div')[0].firstChild.nodeValue;
    		var aKsa = aKs *0.755;
    		tables[j].getElementsByTagName('td')[3].getElementsByTagName('div')[1].appendChild(document.createTextNode(aKsa));
    		
    		var aKs2 = tables[j].getElementsByTagName('td')[4].getElementsByTagName('div')[0].firstChild.nodeValue;
    		var aKsa22 = aKs2 *0.755;
    		tables[j].getElementsByTagName('td')[4].getElementsByTagName('div')[1].appendChild(document.createTextNode(aKsa22));
    		
    		var aKs3 = tables[j].getElementsByTagName('td')[2].getElementsByTagName('div')[0].firstChild.nodeValue;
    		var aKsa33 = aKs3 *0.755;
    		tables[j].getElementsByTagName('td')[2].getElementsByTagName('div')[1].appendChild(document.createTextNode(aKsa33));
    		}
    	}
    
    }
    many thanks again ;-)
    cheers


  •  

    Posting Permissions

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