javascript - 如何使用用户定义的方程计算 HTML 表列(使用 javascript 或 jquery)

Question

我需要一些帮助来使用来自其他列的数据和用户定义的方程动态计算 HTML 表格列。

例如，如果用户在输入框中输入公式 C1 + C2 * 0.5 + C3 * 0.8，则表格需要根据定义的列中的数据计算最后一列等式(C1 = 第 1 列，C2 = 第 2 列...)。

我的表数据是这样的:

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         -

如果用户在输入中输入公式 C1 + C2 * 0.5 + C3 * 0.8，则表格应执行操作并根据该公式填写最终成绩列。

结果应该是这样的。

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

最终成绩的第一行将像这样计算 (8.75 + 7.60 * 0.5 + 55.50 * 0.8)。

这是我的 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>

如有任何帮助，我们将不胜感激!

Answer 1

这是一个使用邪恶的 eval 的例子 (!) .

• 适用于任意数量的单元格、大写或小写的 C 标识符。
• 如果主题单元格无效，结果将为“NaN”。
• 如果提供的方程式无效，结果将为"-"

基本上它会创建一个对象，其引用如 {"c1":8.75, "c2":7.60, ...} ，然后eval输入字符串用相应的对象值替换出现的 c*。

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>