計算公式如Excel的jQuery

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

它可以與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 2

這是爲了使用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 3

隨着子：

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; 
} 

我用math_it_up功能從How can I convert a string into a math operator in javascript

您可以通過添加你的（例如模）擴大經營。請注意，我沒有檢查value1或value是否是有效的號碼。

FIDDLE

Answer 4

你絕對可以使用這個插件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兼容的公式在它

Answer 5

如果有人還在尋找類似的解決方案，我建議http://mathjs.org/。

簡單的電子表格類例如：

jQuery(function($) { 
 

 
    var calculate = function(n) { 
 
    var expr = n.attr('data-equation') 
 
     , ret = expr; 
 
    
 
    if (expr) { 
 
     try { 
 
     ret = math.eval(expr); 
 
     } catch(e) { 
 
     ret = 'Syntax error in equation!'; 
 
     } 
 
    } 
 

 
    var obj = {}; 
 
    obj[n.attr('id')] = ret; 
 
    math.import(obj, { override: true }); 
 

 
    return ret; 
 
    }; 
 

 
    $.fn.equations = function() { 
 

 
    $(this).each(function() { 
 
     var n = $(this); 
 

 
     n.focus(function() { 
 
     n.val(n.attr('data-equation')); 
 
     }); 
 

 
     n.blur(function() { 
 
     n.attr('data-equation', n.val()); 
 
     n.attr('title', n.val()); 
 
     n.val(calculate(n)); 
 
     }); 
 

 
     if (!n.attr('data-equation')) { 
 
     n.blur(); 
 
     } 
 

 
     n.val(calculate(n)); 
 
    }); 
 

 
    }; 
 

 
    $('input').equations(); 
 

 
});

<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>