I am looking for a way to make html table acting like excel using Javascript (Jquery preferred). Here are my problem. I made a table like this:

 <table>
       <tr>
          <td id="A1">10</td>
          <td id="B1">10.5</td>
       </tr>
       <tr>
          <td id="A2">5</td>
          <td id="B2" formula="A1+B1+A2"></td>
       </tr>
 </table>

Every td has an id, some of those tds are added a formula attribute. And I wanna to calculate those formula， give the value of formula to the td.

In the table above, here, I wanna assign the B2 value 25.5(B2=A1+B1+A2).

Look like this:

<td id="B2" formula="A1+B1+A2">25.5</td>

Can anybody give me a clue? Thanks.

PS: Here are some resource that I found, but they do not solve my problem

1. Spreadsheet-like formulas on the DOM

2. /

Thanks a lot @palindrom. I finally solved my problem based on your answer.

Here is my code:

    $("td[formula]").each(function(){
        //1 get formula attribute
        var formula = $(this).attr('formula');

        //2 use regex to make expression, with the surpport of "A122"， "AB1" and more
        var expression = formula.replace(/([A-Z]+[0-9]+)/g, "parseFloat(\$('#$1').html())") ;

        //3 eval the expression
        var result = eval( expression );

        //4 set the value
        $(this).html(result);
     });

I am looking for a way to make html table acting like excel using Javascript (Jquery preferred). Here are my problem. I made a table like this:

 <table>
       <tr>
          <td id="A1">10</td>
          <td id="B1">10.5</td>
       </tr>
       <tr>
          <td id="A2">5</td>
          <td id="B2" formula="A1+B1+A2"></td>
       </tr>
 </table>

Every td has an id, some of those tds are added a formula attribute. And I wanna to calculate those formula， give the value of formula to the td.

In the table above, here, I wanna assign the B2 value 25.5(B2=A1+B1+A2).

Look like this:

<td id="B2" formula="A1+B1+A2">25.5</td>

Can anybody give me a clue? Thanks.

PS: Here are some resource that I found, but they do not solve my problem

1. Spreadsheet-like formulas on the DOM

2. http://zaach.github./jison/docs/

Thanks a lot @palindrom. I finally solved my problem based on your answer.

Here is my code:

    $("td[formula]").each(function(){
        //1 get formula attribute
        var formula = $(this).attr('formula');

        //2 use regex to make expression, with the surpport of "A122"， "AB1" and more
        var expression = formula.replace(/([A-Z]+[0-9]+)/g, "parseFloat(\$('#$1').html())") ;

        //3 eval the expression
        var result = eval( expression );

        //4 set the value
        $(this).html(result);
     });

• javascript
• jquery
• html
• excel
• html-table

3 Answers 3

Should work for simple math, didnt try:

$("td[formula]").each( function() {
  this.html( eval( this.attr("formula").replace(/[a-z][0-9]/g, "\$('#$0').html()") ) );
} );

Edit: If you have functions like sum in the formulas, implement them as javascript functions and they should work too.

even if this too late, try this plugin https://github./xsanisty/jquery-calx

I have develop it using jison parser in its core, it will parse the formula in the data-formula attribute just like you want

This is a html table I wrote in which a formula is puted for each line (see iframe source).
The formula is written in JavaScript (as plex as can be) in which [abc] is replaced with the value of cell with id=abc (weights from the header) and {abc} with the text in cell from the same column in that line.
The columns are sortable
The weights are modifiable by the user and they are remembered in a cookie.

Hoping this can help.