Question

我有一个HTML，

 <table>
  <tr>
    <td><input type="text" data-column="A" value="5" data-row="1" /></td>
    <td><input type="text" data-column="B" value="2" data-row="1" /></td>

  </tr>
 <tr>
    <td><input type="text" value="7" data-column="A" data-row="2" /></td>
    <td><input type="text" value="9" data-column="B" data-row="2" /></td>
</tr>
<tr>
      <th><input type="text" data-column="A" data-row="3"  data-equation="A1+A2-B1" />      </th>
     <th><input type="text" data-column="B" data-row="3"  data-equation="B1+B2"  /></th>
   </tr>

 </table>

和我的javascript一样

 $('input').each(function(){
 if($(this).attr('data-equation')!=undefined){
    var equation=$(this).attr('data-equation');
    $(this).val(calculate(equation))
 }
});

function calculate(equation){
  result=0;
  //calculate value and return,i dont know how to calculate
  return result;
}

我需要根据数据方程来计算值，在等式中，第一个元素是数据列，第二个是数据行

Fiddle Demo

Answer 1

如果有人仍在寻找类似的解决方案，我建议。

简单的电子表格式示例：

＆＃13;

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Equations</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.5.1/math.min.js"></script>
  </head>
  <body>
    <p>A1: <input type="text" id="A1" value="2+2"/></p>
    <p>A2: <input type="text" id="A2" value="16"/></p>
    <p>A3: <input type="text" id="A3" value="A1+A2"/></p>
  </body>
</html>

＆＃13;

{{1}}

＆＃13;

Answer 2

使用子串：

var math_it_up = {
    '+': function (x, y) { return x + y },
    '-': function (x, y) { return x - y },
    '*': function (x, y) { return x * y },
    '/': function (x, y) { return x / y }
};

$('input').each(function(){
    if($(this).attr('data-equation')!=undefined){
        var equation=$(this).attr('data-equation');
        $(this).val(calculate(equation));
    }
});

function calculate(equation){
    result=0;
    index=2;

    var value1 = $('input[data-column="'+equation.substring(0,1)+'"]
[data-row="'+equation.substring(1,2)+'"]').val();

    result = parseInt(value1);

    while(equation.substring(index,index+1) !== "") {
        var operator = equation.substring(index, index+1);

        var value = $('input[data-column="'+equation.substring(index + 1, index+2)+'"]
[data-row="'+equation.substring(index + 2, index+3)+'"]').val();

        result = math_it_up[operator](result, parseInt(value));

        index += 3;
    }

    return result;
}

我使用了How can I convert a string into a math operator in javascript

中的math_it_up函数

您可以通过添加运算符来扩大运算符（例如modulo）。请注意，我没有检查value1或value是否为有效号码。

<强> FIDDLE

Answer 3

这是使用eval函数的另一种方法。要完全实现这一点，所有的数学运算可能比它的价值更多，所以建议那里，但这里是一个简单的实现。 fiddle

function calculate(equation){
    var vals = getValues(equation),
        operators = getOperators(equation),
        num1 = vals[0];
    for(var i=0; i<operators.length; i++){
        // simplistic you'll need to be more careful of order of operations
        // if you're going to be using things other than addition and subtraction
        num1 = calculateOperation(operators[i], num1, vals[i+1]);
    }
    return num1;
}

function calculateOperation(op, num1, num2){
    // add more ops as necessary
    if (op === '+'){
        return num1 + num2;
    } else if (op === '-'){
        return num1 - num2;
    }
}

function getValues(eq){
    // use regex because there might be more than one character denoting a row or column
    var column, row,
        operatorRegex = /[\+|\-]/;
        return eq.split(operatorRegex).map(function(identifier){
            column = identifier.replace(/[0-9]+/, "");
            row = identifier.replace(/[A-Za-z]+/, "");
            return parseInt($('[data-column="'+column+'"][data-row="'+row+'"]').val(), 10);
        });
}

function getOperators(eq){
     var ops = eq.split(/[A-Za-z0-9]+/);
     // remove the quotes and return
     return ops.slice(1, ops.length-1);
}

$('input').each(function(){
    if($(this).attr('data-equation')!=undefined){
        var equation=$(this).attr('data-equation');
        $(this).val(calculate(equation))
    }
});

Answer 4

可以使用eval()函数完成：

$(function(){
    $("input").each(function(){
        var col = $(this).data("column");
        var row = $(this).data("row");
        var val = $(this).val();
        var equation = $(this).data("equation");

        if(equation == undefined)
        {
            eval(col+row+"="+val);
        }
        else
        {
            $(this).val(eval(equation));
        }
    });
});

Answer 5

您绝对可以使用此插件https://github.com/xsanisty/jquery-calx

我之前创建了这个，并且仍在维护它，但是使用data-column和data-equation

而不是data-cell和data-formula

<form id="sheet">
    <input type="text" data-cell="A1" />
    <input type="text" data-cell="A2" />
    <input type="text" data-cell="A3" data-formula="A1*A2" />
</form>

只需要启动插件

<script>
    $('#sheet').calx()
</script>

现在，它应该计算#sheet内定义的所有公式，你甚至可以使用很多excel兼容的公式

像excel jquery一样计算方程式

5 个答案: