Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Computing for a dynamic value in a HTML Table

Status
Not open for further replies.

totogella

Technical User
Oct 18, 2002
5
US
Hi,

I need help in computing for a det of data in a table that is automatically generated by a special program. I have searched for scripts that do this but to no avail.

Thanks in advance for your help

totogella
 
Sure!

Col1 Col2 Col3 Col4
Value1 1 2 3 4
Value2 4 5 6 7
Value3 2 4 6 8
----------------------------------
Total 7 11 15 19

Where the values in the table dynamically change so the total fields should also update as the values change.

Thanks!
 
I believe there is a way to do this.

I am in the middle of a script right now and it would ask a little investement to create such a script (well to learn how to do it anyways).

I can direct you to mozilla ref. that deals with tables.

You can also see in google for scripts that sort tables. It might give you a good start. Gary Haran
 
You say, "the values in the table dynamically change". What makes them change? Is the user changing them? Or, are you running some Java or Javascript that is changing them?

Are the values in the table inside text fields or just simply displayed?

What browsers must it work with?

 
Hi Flowcontrol,

Yes, the values changes due to a program that constantly redraws the HTML page with new sets of data. The values in the table are also non-editable.


Should work with I.E.

Thanks for your help.
 
OK. If the other program redraws the entire page, why doesn't it do the calculations? Or, is it just changing the values in the table and NOT redrawing the page?
 
Thanks! I am looking forward to that! Well, basically, it just changes the values in the table.

Thanks for your help in advance.
 
It works in mozilla right now. However I need to patch it for IE to work. Give me a few more minutes.

<html>
<head>
<title>test for tables</title>
</head>
<body>

<table id=&quot;myTable&quot;>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>


<script>

var values = [];
var table = document.getElementById(&quot;myTable&quot;);
var trs = table.getElementsByTagName(&quot;tr&quot;);

// create a multidimensional array
for(var ii = 0; ii < trs.length; ii++)
{
values[ii] = [];
}

// store all values inside all the multidimensional array
for (var trIndex = 0; trIndex < trs.length; trIndex++)
{
var tds = trs[trIndex].getElementsByTagName(&quot;td&quot;);

for (var tdIndex = 0; tdIndex < tds.length; tdIndex++)
{
values[trIndex][tdIndex] = parseFloat(tds[tdIndex].innerHTML)
}
}

var sums = []
for (var row = 0; row < values[0].length; row++)
{
sums[row] = 0;
for(var col = 0; col < values.length; col++)
{
sums[row] += values[col][row]
}
}


// create a new row
tr = document.createElement(&quot;tr&quot;)
for (var ii = 0; ii < sums.length; ii++)
{
td = document.createElement(&quot;td&quot;)
td.innerHTML = sums[ii]
tr.appendChild(td)
}

table.appendChild(tr)

</script>



</body>
</html> Gary Haran
 
either we are faced with yet another bug in IE or I am not capable of patching for IE.

I tried using appendChild inserRow and even insertAdjacentHTML and it doesn't let me do anything to the table.

Here is a patchy and ugly way to make it work in IE :

<html>
<head>
<title>test for tables</title>
</head>
<body>

<table id=&quot;myTable&quot;>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
<div id=&quot;totalContainer&quot;></div>


<script>

var values = [];
var table = document.getElementById(&quot;myTable&quot;);
var trs = table.getElementsByTagName(&quot;tr&quot;);

// create a multidimensional array
for(var ii = 0; ii < trs.length; ii++)
{
values[ii] = [];
}

// store all values inside all the multidimensional array
for (var trIndex = 0; trIndex < trs.length; trIndex++)
{
var tds = trs[trIndex].getElementsByTagName(&quot;td&quot;);

for (var tdIndex = 0; tdIndex < tds.length; tdIndex++)
{
values[trIndex][tdIndex] = parseFloat(tds[tdIndex].innerHTML)
}
}

var sums = []
for (var row = 0; row < values[0].length; row++)
{
sums[row] = 0;
for(var col = 0; col < values.length; col++)
{
sums[row] += values[col][row]
}
}

// create a new row
tr = document.createElement(&quot;tr&quot;)
for (var ii = 0; ii < sums.length; ii++)
{
td = document.createElement(&quot;td&quot;)
td.innerHTML = sums[ii]
tr.appendChild(td)
}

if (!document.all) // for mozilla and other working browsers
{
table.appendChild(tr)
}
else // for buggy IE
{
var table = document.createElement(&quot;table&quot;)
table.appendChild(tr)
document.getElementById(&quot;totalContainer&quot;).innerHTML = table.innerHTML;
}
</script>

</body>
</html>

I hate IE sometimes. Gary Haran
 
well I hope this prototype does give you insight on how it can be done. Do note that it will not work in anything below 5.0 browsers.

I hope this helps. I gotta go to sleep now. Ciao Gary Haran
 
Hi Xutopia,

I'll give it a try. Thanks so much for your help! It is very much appreciated.

totogella
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top