网页table 表格 具有excel 单元格公式功能

姓名	数学得分	英语得分	总得分	总得分占比
张三	100	80	180	0.6206896551724138
李四	50	60	110	0.3793103448275862
合计	150	140	290	1

其中灰色部分需要计算，那可以用js处理,需引用JQuery。

行是从tbody开始算的，tbody标记要有的。

给需要公式的td加上 data-s="0:[1,2]+[1,3]" 就可以，数字0代表计算优先级（因为考虑到带有公式的单元格也要参加另外一组的运算，那么另外一组的单元格优先级排后就是1,依次往后排），[1,2]+[1,3]代表[行索引,了列索引]

行索引和列索引从1开始。

data-total="true" 带有此标记的单元格的值是当前列汇总合计

                            <table class="calc-expression" style="width:500px;">
                                <thead>
                                    <tr>
                                        <th>姓名</th>
                                        <th>数学得分</th>
                                        <th>英语得分</th>
                                        <th>总得分</th>
                                        <th>总得分占比</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>张三</td>
                                        <td>100</td>
                                        <td>80</td>
                                        <td data-s="0:[1,2]+[1,3]"></td>
                                        <td data-s="1:[1,4]/([1,4]+[2,4])"></td>
                                    </tr>
                                    <tr>
                                        <td>李四</td>
                                        <td>50</td>
                                        <td>60</td>
                                        <td data-s="0:[2,2]+[2,3]"></td>
                                        <td data-s="1:[2,4]/([1,4]+[2,4])"></td>
                                    </tr>
                                    <tr>
                                        <td>合计</td>
                                        <td data-total="true"></td>
                                        <td data-total="true"></td>
                                        <td data-total="true"></td>
                                        <td data-total="true"></td>
                                    </tr>
                                </tbody>
                            </table>

$(function () {
            $(".calc-expression").each(function () {
                var map = [];
                var tbody = $(this).find("tbody");
                var rows = tbody.find("tr");
                rows.each(function () {
                    var tds = $(this).find("td");
                    tds.each(function () {
                        if ($(this).attr("data-s") != "" && $(this).attr("data-s") != undefined) {
                            map.push($(this).attr("data-s"));
                        }
                    });
                });
                var compare = function (x, y) {
                    var a = x.split(':')[0];
                    var b = y.split(':')[0];
                    if (a < b) {
                        return -1;
                    } else if (a > b) {
                        return 1;
                    } else {
                        return 0;
                    }
                }
                map = map.sort(compare);

                for (var i = 0; i < map.length; i++) {
                    rows.each(function () {
                        var tds = $(this).find("td");
                        tds.each(function () {
                            if ($(this).attr("data-s") != "" && $(this).attr("data-s") != undefined) {
                                if ($(this).attr("data-s") == map[i]) {
                                    var temp = $(this).attr("data-s");
                                    temp = temp.split(":")[1];
                                    var re = /\[\d+(\,\d+)?\]/g;
                                    var result1 = temp.match(re);
                                    for (var j = 0; j < result1.length; j++) {
                                        var t1 = result1[j];
                                        temp = temp.replace(t1, parseFloat(getCellValue(rows, t1)));
                                    }

                                    $(this).html(eval(temp));
                                    return false;
                                }
                            }
                        });
                    });
                }
                rows.each(function (rindex) {
                    var tds = $(this).find("td");
                    tds.each(function (cindex) {
                        if ($(this).attr("data-total") != "" && $(this).attr("data-total") != undefined) {
                            if ($(this).attr("data-total") == "true") {
                                var total = 0.0;
                                rows.each(function (i) {
                                    if (i == rindex) {
                                        return false;
                                    }
                                    else {
                                        var tds2 = $(this).find("td");
                                        tds2.each(function (j) {
                                            if (j == cindex) {
                                                if ($(this).html() != "") {
                                                    total += parseFloat($(this).html());
                                                }
                                            }
                                        });
                                    }
                                });
                                $(this).html(total);
                            }
                        }
                    });
                });

                //0:[1,11]+[1,2]
                function getCellValue(rows, a) {
                    a = a.replace("[", "");
                    a = a.replace("]", "");
                    var result = 0;
                    var x = a.split(",")[0];
                    var y = a.split(",")[1];

                    var h = false;
                    rows.each(function (i1) {
                        if (h) {
                            return false;
                        }
                        if ((i1 + 1) == x) {
                            var tds = $(this).find("td");
                            tds.each(function (i2) {
                                if ((i2 + 1) == y) {
                                    h = true;
                                    result = $(this).html();
                                } else {
                                    return true;
                                }
                            });
                        }
                        else {
                            return true;
                        }
                    });

                    return result;
                }
            });
        });