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 to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    changing values in a table

    I have a web page which performs a calculation when asked and produces a table of results on the same page. It does this by creating the necessary table cells and text nodes and appends them to an empty table on the calculation page.

    When the page is asked to perform another calculation, another table of results is produced under the original one in the same way (appended to the same table element). However, I want it to discard the old set of reults so only the new ones are displayed after each calculation. I'm sure this is simple to do, but I've tried allsorts and nothing wants to work!

    .js file:
    Code:
    function calculate()
    {
    	
    	//DECLARE VARIABLES
    	var specmean = parseFloat(document.getElementById("specmean").value);
    	var altmean = parseFloat(document.getElementById("altmean").value);
    	var standev = parseFloat(document.getElementById("standev").value);
    	var sig1 = document.single_mean.sig[0].checked;
    	var sig5 = document.single_mean.sig[1].checked;
    	var za;
    	var zb;
    	var diff;
    	var increment;
    	var p = [0.5244,0.8416,1.2816,1.6449];
    	var num;
    	
    	//ASSIGN VALUES TO Z ALPHA AND Z BETA AND WORK OUT REQUIRED INCREMENT
    	if (sig1 == true)
    		za = 2.3263;
    
    	if (sig5 == true)
    		za = 1.6449;
    		
    	
    	if (specmean > altmean)
    		diff = specmean - altmean;
    
    	else diff = altmean - specmean;
    
    	
    	if (diff<=50 && diff>10)
    		increment=1;
    
    	else if (diff<=10 && diff>5)
    		increment=0.5;
    
    	else if (diff<=5)
    		increment=0.1;
    
    	else increment=5;
    
    	
    	//CREATE AND SET ATTRIBUTES OF REQUIRED TABLE ELEMENTS
    	var labelRows = new Array();
    	var labelColsTop = new Array();
    	var labelColsBottom = new Array();
    	var tableRows = new Array();
    	var tableCols = new Array();
    
    	for (var a=0; a<9; a++)
    	{
    		tableCols[a] = new Array();
    	}
    	var textColsTop = new Array();
    	var textColsBottom = new Array();
    	var textCols = new Array();
    	for (a=0; a<9; a++)
    	{
    		textCols[a] = new Array();
    	}
    
    	labelRows[0] = document.createElement('tr');
    	labelRows[1] = document.createElement('tr');
    
    	labelColsTop[0] = document.createElement('td');
    	labelColsTop[0].setAttribute('width','10%');
    	labelColsTop[0].setAttribute('align','center');
    	labelColsTop[0].setAttribute('rowspan','2');
    	labelColsTop[1] = document.createElement('td');
    	labelColsTop[1].setAttribute('width','40%');
    	labelColsTop[1].setAttribute('align','center');
    	labelColsTop[1].setAttribute('colspan','4');
    
    	for (var h=0; h<5; h++)
    	{
    		labelColsBottom[h] = document.createElement('td');
    		labelColsBottom[h].setAttribute('width','10%');
    		labelColsBottom[h].setAttribute('align','center');
    	}
    
    	for (var i=0; i<9; i++)
    	{
    		tableRows[i] = document.createElement('tr');
    		for (var j=0; j<5; j++)
    		{
    			tableCols[i][j] = document.createElement('td');
    			tableCols[i][j].setAttribute('align','center');
    			tableCols[i][j].setAttribute('width','10%');
    		}
    	}
    	//END TABLE ELEMENTS CREATION
    
    
    	//CREATE REQUIRED TEXT NODES,
    	//INCLUDING SAMPLE SIZE COMPUTATIONS
    	textColsTop[0] = document.createTextNode('Alternative Mean');
    	textColsTop[1] = document.createTextNode('Sample Size');
    
    	textColsBottom[1] = document.createTextNode('Power = 70%');
    	textColsBottom[2] = document.createTextNode('Power = 80%');
    	textColsBottom[3] = document.createTextNode('Power = 90%');
    	textColsBottom[4] = document.createTextNode('Power = 95%');
    
    	var s=0;
    	var q=0;
    	var n;
    	var decimal;
    	var m=(altmean-(4*increment));
    
    	while (m<(altmean+(5*increment)))
    	{
    		for (q=0; q<9; q++)
    		{
    			decimal = Math.round(m*10)/10;
    			textCols[q][0] = document.createTextNode(decimal);
    			for(n=1; n<5; n++)
    			{
    				zb = p[n-1];
    				num = Math.ceil((((zb+za)*(zb+za))*(standev*standev))/((m-specmean)*(m-specmean)));
    				textCols[q][n] = document.createTextNode(num);
    			}
    			m = m+increment;
    		}
    	}
    
    	//APPEND APPROPRIATE TEXT NODES AND ELEMENTS
    	for (i=0; i<2; i++)
    	{
    		labelColsTop[i].appendChild(textColsTop[i]);
    	}
    	for (i=1; i<5; i++)
    	{
    		labelColsBottom[i].appendChild(textColsBottom[i]);
    	}
    	for (i=0; i<9; i++)
    	{
    		for (j=0; j<5; j++)
    		{
    			tableCols[i][j].appendChild(textCols[i][j]);
    		}
    	}
    	
    	for (i=0; i<2; i++)
    	{
    		labelRows[0].appendChild(labelColsTop[i]);
    	}
    	for (i=0; i<5; i++)
    	{
    		labelRows[1].appendChild(labelColsBottom[i]);
    	}
    	for (i=0; i<9; i++)
    	{
    		for (j=0; j<5; j++)
    		{
    			tableRows[i].appendChild(tableCols[i][j]);
    		}
    	}	
    
    	for (i=0; i<2; i++)
    	{
    		document.getElementById('resultsTable').appendChild(labelRows[i]);
    	}
    	for (i=0; i<9; i++)
    	{
    		document.getElementById('resultsTable').appendChild(tableRows[i]);
    	}
    }
    html:
    Code:
    <HTML>
    <HEAD>
    <TITLE>Sample Size Calculator for a Single Mean Test</TITLE>
    <LINK rel=stylesheet href="style.css" type="text/css">
    <script language="Javascript" src="singlemean.js"></script>
    </HEAD>
    
    <body>
    
    <form id="single_mean" name="single_mean">
    
    Specified Mean:
    <input type="text" id="specmean">
    
    <br/>
    
    Alternative Mean:
    <input type="text" id="altmean">
    
    <br/>
    
    Standard Deviation:
    <input type="text" id="standev">
    
    <br/>
    
    Significance: &nbsp;&nbsp; 1%
    <input type="radio" id="sig1" name="sig">
    &nbsp;&nbsp; 5%
    <input type="radio" id="sig5" name="sig">
    
    <br/><br/>
    
    <input type="button" value="Calculate" onClick="calculate()">
    
    <br/><br/>
    
    <table id="resultsTable">
    </table>
    
    </form>
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    if you want to just delete what's already there, get a pointer to the table and call removeChild on it, passing in childNodes[0] for the tbody element. Then create a new tbody and do all your new appends.

  • #3
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. I knew it was this simple and had tried it, but I kept getting pointer and 'conversion'(?) errors. Anways, it works fine now! Almost...

    I can't work out why but it doesn't work in internet explorer (works fine in firefox and opera). It doesn't give me any javascript error messages in the status bar. Could it be that it doesn't like where I'm appending my table now?

    HTML
    Code:
    <HTML>
    <HEAD>
    <TITLE>Sample Size Calculator for a Single Mean Test</TITLE>
    <LINK rel=stylesheet href="style.css" type="text/css">
    <script language="Javascript" src="singlemean1.js"></script>
    </HEAD>
    
    <body>
    <div id="content-2-column">
    <p>Please fill in all fields:
    </p>
    <br/>
    
    <form id="single_mean" name="single_mean">
    
    Specified Mean:
    <input type="text" id="specmean">
    
    <br/>
    
    Alternative Mean:
    <input type="text" id="altmean">
    
    <br/>
    
    Standard Deviation:
    <input type="text" id="standev">
    
    <br/>
    
    Significance: &nbsp;&nbsp; 1%
    <input type="radio" id="sig1" name="sig">
    &nbsp;&nbsp; 5%
    <input type="radio" id="sig5" name="sig">
    
    <br/><br/>
    
    <input type="button" value="Calculate" onClick="calculate()">
    
    <br/>
    
    </form>
    
    </div>
    
    </body>
    </html>
    JavaScript
    Code:
    var count = 0;
    
    var hyperlinks = new Array();
    for (var i=0; i<9; i++)
    {
    	hyperlinks[i] = new Array();
    	for (var j=0; j<5; j++)
    		{
    			hyperlinks[i][j] = new Array();
    		}
    }
    
    
    function calculate()
    {
    	
    	//DECLARE VARIABLES
    	var specmean = parseFloat(document.getElementById("specmean").value);
    	var altmean = parseFloat(document.getElementById("altmean").value);
    	var standev = parseFloat(document.getElementById("standev").value);
    	var sig1 = document.single_mean.sig[0].checked;
    	var sig5 = document.single_mean.sig[1].checked;
    	var za;
    	var zb;
    	var significance;
    	var diff;
    	var increment;
    	var p = [0.5244,0.8416,1.2816,1.6449];
    	var num;
    	
    	//REMOVE RESULTS TABLE OF A PREVIOUS CALCULATION
    	if (count > 0)
    	{
    		var calc = document.getElementById('content-2-column');
    		var table = document.getElementById('resultTable');
    		calc.removeChild(table);
    	}
    	
    
    	//ASSIGN VALUES TO Z ALPHA AND Z BETA AND WORK OUT REQUIRED INCREMENT
    	if (sig1 == true)
    	{
    		za = 2.3263;
    		significance = '1%';
    	}
    
    	if (sig5 == true)
    	{
    		za = 1.6449;
    		significance = '5%';
    	}
    	
    	if (specmean > altmean)
    		diff = specmean - altmean;
    
    	else diff = altmean - specmean;
    
    	
    	if (diff<=50 && diff>10)
    		increment=1;
    
    	else if (diff<=10 && diff>5)
    		increment=0.5;
    
    	else if (diff<=5)
    		increment=0.1;
    
    	else increment=5;
    
    	
    	
    	//CREATE AND SET ATTRIBUTES OF REQUIRED TABLE ELEMENTS
    	var resultsTable = document.createElement('table');
    	var labelRows = new Array();
    	var labelColsTop = new Array();
    	var labelColsBottom = new Array();
    	var tableRows = new Array();
    	var tableCols = new Array();
    
    	for (var a=0; a<9; a++)
    	{
    		tableCols[a] = new Array();
    	}
    	var textColsTop = new Array();
    	var textColsBottom = new Array();
    	var textCols = new Array();
    	for (a=0; a<9; a++)
    	{
    		textCols[a] = new Array();
    	}
    
    	labelRows[0] = document.createElement('tr');
    	labelRows[1] = document.createElement('tr');
    
    	labelColsTop[0] = document.createElement('td');
    	labelColsTop[0].setAttribute('width','10%');
    	labelColsTop[0].setAttribute('align','center');
    	labelColsTop[0].setAttribute('rowspan','2');
    	labelColsTop[1] = document.createElement('td');
    	labelColsTop[1].setAttribute('width','40%');
    	labelColsTop[1].setAttribute('align','center');
    	labelColsTop[1].setAttribute('colspan','4');
    
    	for (var h=0; h<4; h++)
    	{
    		labelColsBottom[h] = document.createElement('td');
    		labelColsBottom[h].setAttribute('width','10%');
    		labelColsBottom[h].setAttribute('align','center');
    	}
    
    	for (var i=0; i<9; i++)
    	{
    		tableRows[i] = document.createElement('tr');
    		for (var j=0; j<5; j++)
    		{
    			tableCols[i][j] = document.createElement('td');
    			tableCols[i][j].setAttribute('align','center');
    			tableCols[i][j].setAttribute('width','10%');
    		}
    	}
    
    	for (var i=0; i<9; i++)
    	{
    		for (var j=0; j<4; j++)
    		{
    			hyperlinks[i][j][0] = document.createElement('a');
    			hyperlinks[i][j][1] = specmean;
    			hyperlinks[i][j][4] = significance;
    			hyperlinks[i][j][3] = standev;
    		}
    	}
    
    
    	resultsTable.setAttribute('id','resultTable');
    	//END TABLE ELEMENTS CREATION
    
    
    	//CREATE REQUIRED TEXT NODES,
    	//INCLUDING SAMPLE SIZE COMPUTATIONS
    	textColsTop[0] = document.createTextNode('Alternative Mean');
    	textColsTop[1] = document.createTextNode('Sample Size');
    
    	textColsBottom[0] = document.createTextNode('Power = 70%');
    	textColsBottom[1] = document.createTextNode('Power = 80%');
    	textColsBottom[2] = document.createTextNode('Power = 90%');
    	textColsBottom[3] = document.createTextNode('Power = 95%');
    
    	var s=0;
    	var q=0;
    	var n;
    	var decimal;
    	var m=(altmean-(4*increment));
    
    	while (m<(altmean+(5*increment)))
    	{
    		for (q=0; q<9; q++)
    		{
    			decimal = m.toFixed(1);
    			textCols[q][0] = document.createTextNode(decimal);
    			for(n=1; n<5; n++)
    			{
    				zb = p[n-1];
    				num = Math.ceil((((zb+za)*(zb+za))*(standev*standev))/((m-specmean)*(m-specmean)));
    				textCols[q][n] = document.createTextNode(num);
    				hyperlinks[q][n-1][2] = m;
    				hyperlinks[q][n-1][6] = num;
    				if (n==1)
    					hyperlinks[q][n-1][5] = '70%';
    				if (n==2)
    					hyperlinks[q][n-1][5] = '80%';
    				if (n==3)
    					hyperlinks[q][n-1][5] = '90%';
    				if (n==4)
    					hyperlinks[q][n-1][5] = '95%';
    			}
    			m = m+increment;
    		}
    	}
    
    	for (var i=0; i<9; i++)
    	{
    		for (var j=0; j<4; j++)
    		{
    			hyperlinks[i][j][0].setAttribute('href','javascript:display(hyperlinks['+i+']['+j+'][1],hyperlinks['+i+']['+j+'][2],hyperlinks['+i+']['+j+'][3],hyperlinks['+i+']['+j+'][4],hyperlinks['+i+']['+j+'][5],hyperlinks['+i+']['+j+'][6])');
    		}
    	}
    
    	//APPEND APPROPRIATE TEXT NODES AND ELEMENTS
    	for (i=0; i<2; i++)
    	{
    		labelColsTop[i].appendChild(textColsTop[i]);
    	}
    	for (i=0; i<4; i++)
    	{
    		labelColsBottom[i].appendChild(textColsBottom[i]);
    	}
    	for (i=0; i<9; i++)
    	{
    		for (j=0; j<4; j++)
    		{
    			hyperlinks[i][j][0].appendChild(textCols[i][j+1]);
    		}
    	}
    	for (i=0; i<9; i++)
    	{
    		tableCols[i][0].appendChild(textCols[i][0]);
    		for (j=0; j<4; j++)
    		{
    			tableCols[i][j+1].appendChild(hyperlinks[i][j][0]);
    		}
    	}
    	
    	for (i=0; i<2; i++)
    	{
    		labelRows[0].appendChild(labelColsTop[i]);
    	}
    	for (i=0; i<4; i++)
    	{
    		labelRows[1].appendChild(labelColsBottom[i]);
    	}
    	for (i=0; i<9; i++)
    	{
    		for (j=0; j<5; j++)
    		{
    			tableRows[i].appendChild(tableCols[i][j]);
    		}
    	}	
    
    	for (i=0; i<2; i++)
    	{
    		resultsTable.appendChild(labelRows[i]);
    	}
    	for (i=0; i<9; i++)
    	{
    		resultsTable.appendChild(tableRows[i]);
    	}
    
    	document.getElementById('content-2-column').appendChild(resultsTable);
    	count++;
    }

  • #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
    So far:

    1. table's rows must be appended to the TBODY element. In javascript TBODY it is required

    2. compounded attributes are to be written with uppercased first characters:

    labelColsTop[0].setAttribute('rowSpan','2');
    ......
    labelColsTop[1].setAttribute('colSpan','4');
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Interesting. I had always thought it was just another crappy IE bug as it's not necessary to camel case the attribute you are setting in Moz. I worked around it by doing a browser detect and setting the colspan at the creation of the element for IE. Seems as though I can take that out of there now.

    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    The reason to use camelCase is that it's required by iew's broken implementation. The rest of the browsers shouldn't have a problem with it in any case if the document is HTML, since in HTML attribute names are case insensitive. However, for XHTML/XML the attribute names are case sensitive, so XHTML attribute names must be lower case.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


  •  

    Posting Permissions

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