JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<table id='ratiotable'>
<thead>
    <tr>
    <th>Ratio Name</th>
    <th>Factor 1</th>
    <th>Factor 2</th>
    <th>Factor 3</th>
    <th>Formula</th>
    <th>Result</th>
</tr>
</thead>
<tr>
    <td>Name 1</td>
    <td>22</td>
    <td>11</td>
    <td></td>
    <td>Factor1/Factor2</td>
    <td> </td>
</tr>
<tr>
    <td>Name 2</td>
    <td>22</td>
    <td>33</td>
    <td>11</td>
    <td>Factor1/Factor2*Factor3</td>
    <td> </td>
</tr>
<tr>
    <td>Name 1900</td>
    <td>222</td>
    <td>333</td>
    <td>111</td>
    <td>Factor1/Factor2*Factor3</td>
    <td> </td>
</tr>
</table>

CSS

table, td,th {
   border: 1px solid;   
}

td {
   text-align: center;   
}

JavaScript

$(function() {
    $('#ratiotable tr:not(:first)').each(function() {
        console.log($(this).find('td:eq(4)'));
        var $this = $(this);
        var formula = $this.find('td:eq(4)').text().trim();
        var factor1 = $this.find('td:eq(1)').text().trim();
        var factor2 = $this.find('td:eq(2)').text().trim();
        var factor3 = $this.find('td:eq(3)').text().trim();
        formula = formula.replace('Factor1', factor1).replace('Factor2', factor2).replace('Factor3', factor3);
        $this.find('td:eq(5)').text(eval(formula));
    });
});