如何使用jAutoCalc插件

时间:2018-05-04 06:26:00

标签: javascript php jquery mysql ajax

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

1 个答案:

答案 0 :(得分:0)

在这里,我为您创建了一个包含5列的表,如下所示,总计字段是可能的,因为该值将在一组行上计算。因此,您可以在从表格中选择数据的同时计算该值,如下所述。

所以,这里你只需要将值插入,#34; student_id&#34;,&#34; name&#34;,&#34; theory&#34;,&#34; practical&#34;字段,即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)