Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to calculate HTML table columns (using javascript or jquery) with a user defined equation

I need some help with dynamically calculating an HTML table column using data from other columns and using a user-defined equation.

For example, if the user inputs the equation C1 + C2 * 0.5 + C3 * 0.8 into a input box the table would need to calculate the last column based on the data from the columns defined in the equation (C1 = column 1, C2 = column 2...).

My table data looks like this:

Student ID | Homework 1 | Homework 2 | Exam points | Final Grade
1            8.75         7.60         55.50         -
2            9.00         4.50         63.00         -
3            7.75         7.40         45.50         -

If the user typed in the equation C1 + C2 * 0.5 + C3 * 0.8 in the input the table should perform the operations and fill the column Final Grade based on that equation.

The result should look something like this.

Student ID | Homework 1 | Homework 2 | Exam points | Final Grade
1            8.75         7.60         55.50         56.95
2            9.00         4.50         63.00         61.65
3            7.75         7.40         45.50         47.85

The first row in final grade would be calcualted like this (8.75 + 7.60 * 0.5 + 55.50 * 0.8).

This is my body in HTML:

<div>
    <input id="equation">
</div>
<table>
    <tr>
        <th>Student ID</th>
        <th>Homework 1</th>
        <th>Homework 2</th>
        <th>Exam points</th>
        <th>Final grade</th>
    </tr>
    <tr>
        <td>1</td>
        <td>8.75</td>
        <td>7.60</td>
        <td>55.50</td>
        <td class="final-grade">-</td>
    </tr>
    <tr>
        <td>2</td>
        <td>9.00</td>
        <td>4.50</td>
        <td>63.00</td>
        <td class="final-grade">-</td>
    </tr>
    <tr>
        <td>3</td>
        <td>8.75</td>
        <td>7.60</td>
        <td>55.50</td>
        <td class="final-grade">-</td>
    </tr>
</table>

Any help would be greatly appreciated!

like image 355
Nunez19 Avatar asked Aug 24 '18 18:08

Nunez19


People also ask

How do you define the number of columns in a HTML table?

There are several ways to determine the number of columns: Count the number of columns as specified by COL and COLGROUP elements which can only occur at the start of the table (after the optional CAPTION).

How do you calculate sum in HTML?

You can use sum() api from datatable to get total of amount. You need to add below cdn. Add HTML element before table tag, to display the sum amount. And then add the below callback function during the table datatable initialization.

How do you use tables in Javascript?

function generateTableHead(table, data) { let thead = table. createTHead(); let row = thead. insertRow(); for (let key of data) { let th = document. createElement("th"); let text = document.


1 Answers

Here's an example that uses the evil eval (!).

  • Works with any number of cells, uppercase or lowercase C identifier.
  • If the subject cell is invalid the result will be "NaN".
  • If the provided equation is invalid the result will be "-"

Basically it creates an object with references like {"c1":8.75, "c2":7.60, ...} , than it evals the input string replacing the c* occurrences with the respective object value.

function calcGrades() {

  const val = this.value.toLowerCase().trim();
  
  $("#grades tbody tr").each((i, TR) => {
    let res;
    const refs = $("td",TR).get().reduce((ob, TD, i) =>
        [ob["c"+i] = parseFloat(TD.textContent), ob][1], {});
        
    try { res = eval(val.replace(/c\d+/g, $1 => refs[$1])).toFixed(2) } 
    catch (err) { res = "-" }
    
    $(".final-grade",TR).text( res );
  });
}

$("#equation").on("input", calcGrades).trigger("input");
<input id="equation" type="text" value="C1 + c2 * 0.5 + C3 * 0.8">
<table id="grades">
  <thead>
    <tr>
        <th>ID</th><th>Homework 1</th><th>Homework 2</th><th>Exam pts</th><th>Final</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>8.75</td><td>7.60</td><td>55.50</td><td class="final-grade">-</td></tr>
    <tr><td>2</td><td>9.00</td><td>4.50</td><td>63.00</td><td class="final-grade">-</td></tr>
    <tr><td>3</td><td>7.75</td><td>7.40</td><td>45.50</td><td class="final-grade">-</td></tr>
    <tr><td>4</td><td>0</td><td>0.0</td><td>0</td><td class="final-grade">-</td></tr>
    <tr><td>4</td><td>foo</td><td>bar</td><td>baz</td><td class="final-grade">-</td></tr>
  </tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
like image 68
Roko C. Buljan Avatar answered Sep 28 '22 08:09

Roko C. Buljan