bxxx代表td的id，感覺就像EXCEL加減公式，要求寫一個function，把字串表示的td的數字加減起來。
字串公式有5種形式
str1="=b199"
str2="=b142-b143"
str3="=c18+c78+c84+c125"
str4="=b261+b262+b263+b264+b265+b266+b267+b268+b269+b270+b271+b272+b273-b274"
str5="=b2+......+b17"
<table>
<tr>
<td>序號</td><td>值</td><td>公式</td>
</tr>
<tr>
<td>1</td><td id=b1>值</td><td id=c1></td>
</tr>
<tr>
<td>2</td><td id=b2>值</td><td id=c2></td>
</tr>
…………
<tr>
<td></td><td id=b1000>值</td><td id=c1000 class='sum'>=c18+c78+c84+c125</td>
</tr>
</table>
uj5u.com熱心網友回復：
不是挺簡單的嗎，會點js都能寫出來吧，id按順序來的1~100,回圈獲取dom,取出td的值轉換為number 進行加減uj5u.com熱心網友回復：
一個函式需要同時處理這5種情況，正則運算式不太熟，搞不出來。str1="=b199"
str2="=b142-b143"
str3="=c18+c78+c84+c125"
str4="=b261+b262+b263+b264+b265+b266+b267+b268+b269+b270+b271+b272+b273-b274"
str5="=b2+......+b17"
uj5u.com熱心網友回復：
split()一下不久把這些b什么玩意都取出來了嘛uj5u.com熱心網友回復：
// 現在支持 加、減、乘、除
var str6 = '=b1+b2/c1*c2'
alert(strSplit(str6))
// console.log()
function strSplit(str){
if(str[0] != '='){
return str
}
var name_id = ''
var sum = ''
var types = ['+', '-', '*', '/'] // 在這里修改支持的演算法
for(var i = 1; i < str.length; i++){
if(types.indexOf(str[i]) != -1){
sum += getNum(name_id) + str[i]
name_id = ''
}else{
name_id += str[i]
}
if(i == str.length - 1){
sum += getNum(name_id)
}
}
return eval(sum)
}
function getNum(id){
return document.getElementById(id).innerText
}
uj5u.com熱心網友回復：
1：先把字母和=號替換為空2：eval()就直接是結果
uj5u.com熱心網友回復：
簡單的處理：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>formula test</title>
</head>
<body>
<div id='b261'>623</div>
<div id='b262'>786</div>
<div id='b263'>546</div>
<div id='b264'>136</div>
<div id='b265'>627</div>
<div id='b266'>401</div>
<div id='b267'>313</div>
<div id='b268'>139</div>
<div id='b269'>265</div>
<div id='b270'>296</div>
<div id='b271'>821</div>
<div id='b272'>940</div>
<div id='b273'>530</div>
<div id='b274'>946</div>
</body>
</html>
<script>
var f = '=b261+b262+b263+b264+b265+b266+b267+b268+b269+b270+b271+b272+b273-b274+3600';
function cal(formula) {
//如果輸入帶的等于號則先去掉
if (formula.substring(0, 1) === '=') {
formula = formula.substring(1);
}
//取得各計算單元
var cells = formula.split(/[*+-/]/g);
//拆分運算子
var operators = formula.match(/[*+-/]/g);
//第一個單元
formula = val(cells[0]);
//其他單元拼接運算子
for (var i = 1; i < cells.length; i++) {
formula += operators[i - 1] + val(cells[i]);
}
//輸出組合后的字串
console.log(formula);
//輸出計算結果
console.log(eval( formula ));
}
function val(cell) {
//以字母開頭的算作是元素的id，如果有其他的可以修改判斷邏輯
//例如函式，會帶括號……
if (/[A-Za-z]/.test(cell)) {
var dom = document.getElementById(cell);
return dom.innerText;
} else {
return cell;
}
}
cal(f);
</script>
uj5u.com熱心網友回復：
挺簡單的，不要刪我，不是灌水，就是簡單，費腦細胞而已uj5u.com熱心網友回復：
// 用正則
var str6 = '=b1+b2/c1*c2'
console.log(onSum(str6))
function onSum(str){
if(str[0] != '='){
return str
}else{
var r = /[*+-/]/g
str = str.substring(1)
var types = str.match(r)
types ? types.push('') : types = ['']
var data = str.split(r).map(id => document.getElementById(id).innerText ).map((v,i) => v+types[i])
return eval(data.join(''))
}
}
uj5u.com熱心網友回復：
<table id="tab">
<tr>
<td id="a1">10</td>
<td id="a2">50</td>
<td id="a3">20</td>
<td id="a4">10</td>
<td id="a5">=a1+a2+b5</td>
</tr>
<tr>
<td id="b1">50</td>
<td id="b2">70</td>
<td id="b3">60</td>
<td id="b4">40</td>
<td id="b5">=b1+b2</td>
</tr>
<tr>
<td id="c1">50</td>
<td id="c2">70</td>
<td id="c3">60</td>
<td id="c4">=a1+.....+a4</td>
<td id="c5">=c1+...+c4</td>
</tr>
</table>
<script type="text/javascript">
function calc(obj) {
var str = obj.innerText;
if (str[0]=="=") {
obj.innerText = eval(str.slice(1).replace(/([a-z]+)(\d+)([\+\-\*\/])\.{3,}\3\1(\d+)/ig,function (s,a,b,c,d) {
var arr = [];
b = parseInt(b, 10);
d = parseInt(d, 10);
for (var i = b; i <= d; i++)
arr.push(a+i);
return arr.join(c);
}).replace(/[a-z]+\d+/ig,function (s) {
return calc(document.getElementById(s));
}));
}
return obj.innerText;
}
var td = document.querySelectorAll("#tab td");
for (var i = 0, len = td.length; i < len; i++) {
calc(td[i]);
}
</script>
uj5u.com熱心網友回復：
const str1 = "=b199";
const str2 = "=b142-b143";
const str3 = "=c18+c78+c84+c125";
const str4 = "=b261+b262+b263+b264+b265+b266+b267+b268+b269+b270+b271+b272+b273-b274";
function evalCalc(str) {
str = str.replace(/[A-Za-z]|=/g, '');
return eval(str);
};
const res1 = evalCalc(str1);
const res2 = evalCalc(str2);
const res3 = evalCalc(str3);
const res4 = evalCalc(str4);
console.log(res1);
console.log(res2);
console.log(res3);
console.log(res4);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/233349.html
標籤：JavaScript
下一篇：大佬看看孩紙 輪播圖效果