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!
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).
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.
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.
Here's an example that uses the evil eval
(!).
C
identifier. "NaN"
. "-"
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With