如何使用 jAutoCalc 插件将多行动态表写入 Mysql 数据库

Question

我在 jAutoCalc 插件中有一个动态表，用于计算每行的值以及所有行的总值。有人可以分享将每个动态行插入 Mysql 数据库的代码吗？我正在插入一张我的桌子的图片Demo Table

这里的每一行都是自动添加的理论和实践标记；并且小计和总计也自动计算。但我无法将所有行发送到 Mysql 数据库。计算部分使用 jAutoCalc 插件完成。

这是我的表格格式：

<table name="cart">
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Theory</th>
                    <th>Practical</th>
                    <th>Item Total</th>
                </tr>
                <tr name="line_items">
                    <td><button name="remove">Remove</button></td>
                    <td><select name="subject_name">
                            <option value="Eco">Eco</option>
                            <option value="Eng">Eng</option>
                        </select></td>
                    <td><input type="text" name="subject_theory" value="1"></td>
                    <td><input type="text" name="subject_practical" value="9"></td>
                    <td><input type="text" name="subject_total" value="" jAutoCalc="{subject_theory} + {subject_practical}"></td>
                </tr>


                <tr>
                    <td colspan="3">&nbsp;</td>
                    <td>Subtotal</td>
                    <td>&nbsp;</td>
                    <td><input type="text" name="sub_total" value="" jAutoCalc="SUM({subject_total})"></td>
                </tr>

                <tr>
                    <td colspan="3">&nbsp;</td>
                    <td>Total</td>
                    <td>&nbsp;</td>
                    <td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total}"></td>
                </tr>
                <tr>
                    <td colspan="99"><button name="add">Add Row</button></td>
                    <td colspan="99"><button name="submit">Submit</button></td>
                </tr>
            </table>

这是我用于动态生成行的 jquery：

<script type="text/javascript">

            $(document).ready(function() {

                function autoCalcSetup() {
                    $('form[name=cart]').jAutoCalc('destroy');
                    $('form[name=cart] tr[name=line_items]').jAutoCalc({keyEventsFire: true, decimalPlaces: 0, emptyAsZero: true});
                    $('form[name=cart]').jAutoCalc({decimalPlaces: 0});
                }
                autoCalcSetup();


                $('button[name=remove]').click(function(e) {
                    e.preventDefault();

                    var form = $(this).parents('form')
                    $(this).parents('tr').remove();
                    autoCalcSetup();

                });

                $('button[name=add]').click(function(e) {
                    e.preventDefault();

                    var $table = $(this).parents('table');
                    var $top = $table.find('tr[name=line_items]').last();
                    var $new = $top.clone(true);

                    $new.jAutoCalc('destroy');
                    $new.insertAfter($top);
                    $new.find('input[type=text]').val('');
                    autoCalcSetup();

                });

            });

        </script>

Answer 1

在这里，我为您创建了一个包含 5 列的表格，如下所示，Total 字段不可能，因为该值将在一组行上计算。因此，您可以在从表格中选择数据的同时计算该值，正如我在下面逐步解释的那样。

因此，您只需将值插入“student_id”、“name”、“theory”、“practical”字段，即 4 个字段和第 5 列将由数据库本身计算。

mysql> create table mark_obtains(
    -> student_id int,
    -> name varchar(30) not null,
    -> theory int default 0,
    -> practical int default 0,
    -> item_total int GENERATED ALWAYS AS (theory+practical) VIRTUAL
    -> );
Query OK, 0 rows affected (0.39 sec)

mysql> insert into mark_obtains(student_id,name,theory,practical) values (1,'asd',5,6);
Query OK, 1 row affected (0.04 sec)

mysql> select * from mark_obtains;
+------------+------+--------+-----------+------------+
| student_id | name | theory | practical | item_total |
+------------+------+--------+-----------+------------+
|          1 | asd  |      5 |         6 |         11 |
+------------+------+--------+-----------+------------+
1 row in set (0.00 sec)