Как рассчитать столбцы таблицы 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

Пока ваша html-структура остается простой, и вы можете использовать eval (что на самом деле не рекомендуется), определение следующего кода JavaScript и его вызов помогут вам.Вам нужно убедиться, что в c1 ... c3 есть допустимые значения.

    function calcTotals() {
        const c1 = 'parseFloat(fg.previousElementSibling.previousElementSibling.previousElementSibling.textContent)'
        const c2 = 'parseFloat(fg.previousElementSibling.previousElementSibling.textContent)'
        const c3 = 'parseFloat(fg.previousElementSibling.textContent)'
        const equation = document.getElementById('equation').value
        try {
            const fg = document.querySelector('td.final-grade')
            eval(equation.replace('c1',c1)
                         .replace('c2',c2)
                         .replace('c3',c3))
        } catch(e) {
            alert('Please enter a valid equation')
        }
        document.querySelectorAll('td.final-grade').forEach(fg => {
            fg.textContent = eval(equation.replace('c1',c1)
                                          .replace('c2',c2)
                                          .replace('c3',c3))
        })
    }

Answer 2

Вот пример, который использует зло eval (!) .

• Работает с любым количеством ячеек , прописными или строчными буквами C идентификатор.
• Если субъектная ячейка недействительна , результатом будет "NaN".
• Если предоставленное уравнение недопустимо , результат будет "-"

В основном он создает объект со ссылками типа {"c1":8.75, "c2":7.60, ...}, чем он eval s входная строка, заменяющая вхождения 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>

Answer 3

Что ж, вы делаете это очень хрупко, пользователь вводит один другой символ на входе, и тогда все вычисления могут потерпеть неудачу.

Но кроме этого, есть способ сделать это, сохранивкак вы хотите ( я не рекомендую ), но давайте перейдем к объяснению:

1. Добавьте классы в свою таблицу HTML, чтобы вы могли идентифицировать каждую строку иcolumn.
2. Создайте функцию, которая получает значения из каждой строки (используя цикл), и другую функцию, которую вы можете вызвать для вычисления этих значений.
3. Внутри функции, которая вычисляет, находится источникрешение и проблема одновременно.На данный момент он работает только с 3 столбцами и, учитывая, что пользователь знает, что только c1, c2 или c3 являются допустимыми именами столбцов.
4. При значении equation вы заменяете столбецимена со значениями столбцов.Затем вы проверяете, есть ли еще какой-нибудь другой символ, если да, тогда уравнение неверно, и должно отображаться сообщение или ошибка.
5. Если других символов не осталось, и в уравнении присутствуют только цифры и символы операций,затем мы используем метод BAD IDEA eval(), который оценивает уравнение как оно есть.
6. Я добавил функцию eval внутри блока try...catch, чтобы немного большебезопасный (пожалуйста, прочитайте о том, почему eval не является хорошим решением здесь: LINK )
7. Хорошо, если уравнение было введено правильно и eval не ввел вредоносный код, то выбудет иметь окончательное значение для возврата.

Ниже код, как пример:

let btn_calc = $("#btn_calc");
let equation = $("#equation");


btn_calc.on("click", calculate);

function calculate(){
  let rows = $(".values");
  for (var i = 0; i < rows.length; i++){
    let singleRow = $(rows[i]);
    let grade = singleRow.find(".final-grade");
    let n1 = singleRow.find(".c1").text(); 
    let n2 = singleRow.find(".c2").text();
    let n3 = singleRow.find(".c3").text();
    let total = returnValue(n1,n2,n3);
    if (total != false){
      grade.text(total)    
    } else {
      return;
    }
  }
}

function returnValue(n1,n2,n3){
  let calc = equation.val().trim();
  let result = 0;
  debugger;
  if (calc != null && calc != ""){
     calc = calc.replace(/c1/g,n1).replace(/c2/g,n2).replace(/c3/g,n3)

     var regx = new RegExp("[a-z]", "gi");
     debugger;
     if (calc.match(regx)){
      console.log(calc);
      alert("Your equation is invalid!");
      return false;
     }

     try{
      result = eval(calc);
      result.toFixed(2);
     } catch (ex){
      alert("Error in your equation! " + ex);
     }
  }
  return result;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" id="equation"/> (Valid Column names: c1, c2, c3)
  <br>
  <input type="button" value="Calculate" id="btn_calc"/>
</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 class="values">
        <td>1</td>                              
        <td class="c1">8.75</td>
        <td class="c2">7.60</td>
        <td class="c3">55.50</td>
        <td class="final-grade">-</td>
    </tr>
    <tr class="values">
        <td>2</td>
        <td class="c1">9.00</td>
        <td class="c2">4.50</td>
        <td class="c3">63.00</td>
        <td class="final-grade">-</td>
    </tr>
    <tr class="values">
        <td>3</td>
        <td class="c1">8.75</td>
        <td class="c2">7.60</td>
        <td class="c3">55.50</td>
        <td class="final-grade">-</td>
</tr>

Вам повезло, что у меня было немного свободного времени, чтобы написать это для вас ... Я должен отправить счет, хахаха