I have a table in a HTML file, and I want to calculate one cell's value based on other cells' values and a cell value as a formula. Take a look at this picture:

In my table, I have 1900 ratios and three factors in three columns. How I can calculate the result column values based on their respective formula column value?

Note: I use only *, /, +, and - in my formulas. Also, the table has an ID (ratiotable), but the <tr> and <td> don't have any ID or class names assigned to them.

If you know another webpage that did something like this, please let me see this.

Thank you very much.

Edit: The HTML code is like this. Note, I snipped a number of the rows. The actual number of rows is 1900:

<table>
<thead>
    <tr>
        <th>Ratio Name</th>
        <th>Factor1</th>
        <th>Factor2</th>
        <th>Factor3</th>
        <th>Formula</th>
        <th>Result</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Name1</td>
        <td>22</td>
        <td>11</td>
        <td></td>
        <td>Factor1/Factor2</td>
        <td></td>
    </tr>    
    <tr>
        <td>Name2</td>
        <td>22</td>
        <td>33</td>
        <td>11</td>
        <td>Factor1/Factor2*Factor3</td>
        <td></td>
    </tr>  
    <tr>
        <td>Name1</td>
        <td>12</td>
        <td></td>
        <td>4</td>
        <td>(Factor1+Factor2)/Factor3</td>
        <td></td>
    </tr>
</tbody>

I have a table in a HTML file, and I want to calculate one cell's value based on other cells' values and a cell value as a formula. Take a look at this picture:

In my table, I have 1900 ratios and three factors in three columns. How I can calculate the result column values based on their respective formula column value?

Note: I use only *, /, +, and - in my formulas. Also, the table has an ID (ratiotable), but the <tr> and <td> don't have any ID or class names assigned to them.

If you know another webpage that did something like this, please let me see this.

Thank you very much.

Edit: The HTML code is like this. Note, I snipped a number of the rows. The actual number of rows is 1900:

<table>
<thead>
    <tr>
        <th>Ratio Name</th>
        <th>Factor1</th>
        <th>Factor2</th>
        <th>Factor3</th>
        <th>Formula</th>
        <th>Result</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Name1</td>
        <td>22</td>
        <td>11</td>
        <td></td>
        <td>Factor1/Factor2</td>
        <td></td>
    </tr>    
    <tr>
        <td>Name2</td>
        <td>22</td>
        <td>33</td>
        <td>11</td>
        <td>Factor1/Factor2*Factor3</td>
        <td></td>
    </tr>  
    <tr>
        <td>Name1</td>
        <td>12</td>
        <td></td>
        <td>4</td>
        <td>(Factor1+Factor2)/Factor3</td>
        <td></td>
    </tr>
</tbody>

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 31, 2012 at 16:57 David Peterson asked Aug 9, 2012 at 13:12 David PetersonDavid Peterson 5521414 silver badges3131 bronze badges 7

• can you place the actual html you are using for it – rahul Commented Aug 9, 2012 at 13:20
• @rahul I edited the question just now – David Peterson Commented Aug 9, 2012 at 13:29
• that's gud now can you please tell me that your formula will be in this terms only Factor1 Factor2... – rahul Commented Aug 9, 2012 at 13:31
• 1 you can see Chris Francis answer i think this will give you a start – rahul Commented Aug 9, 2012 at 13:37
• 1 I don't usually believe in writing out such a 'plete' solution on SO, but I was too intrigued by this not to try it! /geekout – chrisfrancis27 Commented Aug 9, 2012 at 13:39

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

This was a really interesting challenge. I've put together a little JSFiddle here that does what you describe. It essentially replaces the string parts of the formula with their value counterparts, then evals the result. Hopefully this helps!

My Markup

<table>
    <thead>
        <tr>
            <th>Ratio Name</th>
            <th>Factor1</th>
            <th>Factor2</th>
            <th>Factor3</th>
            <th>Formula</th>
            <th>Result</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name1</td>
            <td>22</td>
            <td>11</td>
            <td></td>
            <td>Factor1/Factor2</td>
            <td></td>
        </tr>    
        <tr>
            <td>Name2</td>
            <td>22</td>
            <td>33</td>
            <td>11</td>
            <td>Factor1/Factor2*Factor3</td>
            <td></td>
        </tr>  
        <tr>
            <td>Name1</td>
            <td>12</td>
            <td></td>
            <td>4</td>
            <td>(Factor1+Factor2)/Factor3</td>
            <td></td>
        </tr>
    </tbody>
</table>

​ My JavaScript

$(function() {
    $('tbody tr').each(function() {
        var $this = $(this),
            f1 = $this.find('td').eq(1).text() || 0,
            f2 = $this.find('td').eq(2).text() || 0,
            f3 = $this.find('td').eq(3).text() || 0,
            formula = $this.find('td').eq(4).text(),
            resultTd = $this.find('td').last();

       formula = formula.replace('Factor1',f1)
                        .replace('Factor2',f2)
                        .replace('Factor3',f3);

        resultTd.text(eval(formula));
    });
});​

loop through all rows and use javascript eval() function

function cellValue(x,y){
    return $('#ratiotable').find('tr:eq('+(y+1)+')>td:eq('+(x+1)+')').text();    
}

function setCellValue(x,y,s){
    $('#ratiotable').find('tr:eq('+(y+1)+')>td:eq('+(x+1)+')').text(s);    
}

$(function(){
    $.each($('#ratiotable tr'),function(i,tr){
        var Factor1 = parseInt(cellValue(0,i));
        var Factor2 = parseInt(cellValue(1,i));
        var Factor3 = parseInt(cellValue(2,i));
        var Formula = $.trim(cellValue(3,i));
        var Result = eval(Formula);
        setCellValue(4,i,Result);
    });    
});

like this