Bootstrap3实现费用报销表单

太空漫步11

于 2024-03-24 12:38:24 发布

阅读量475

点赞数 7

文章标签： bootstrap

本文链接：https://blog.csdn.net/zhourongxiang1/article/details/136985493

版权

在这里插入图片描述

要求：点击增加按钮，需要增加一行用户和金额的输入框。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <style>
        table tr td {
            padding: 2px;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">费用报销单</h1>
    <form action="" style="margin-left: 500px;">

        <table>
            <tr>
                <td>
                    <label for="dept">报销部门</label>
                </td>
                <td>
                    <label for="datetimepicker3">日期</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" class="form-control" id="dept">
                </td>
                <td>
                    <div class='input-group date'>
                        <input type='text' class="form-control" id='datetimepicker3' />
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    用途
                </td>
                <td>
                    金额（元）
                </td>
            </tr>
            <tr id="addTr">
                <td>
                    <input type="text" class="form-control">
                </td>
                <td>
                    <input type="number" class="form-control money" onblur="sum()">
                </td>

            </tr>
            <tr>
                <td>
                    <button type="button" class="btn btn-default" id="add">增加</button>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>合计（元）</td>
                <td id="sum">115</td>
            </tr>

        </table>


    </form>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.22.1/moment-with-locales.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- DateTimePicker JS -->
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

    <script>
        function sum() {
            var sumVal = 0;

            $.each($('.money'), function(index, item) {
                var val = $(item).val();
                if (val) {

                    sumVal += parseFloat(val);
                }
            })
            $('#sum').text(sumVal);
        }

        function del(btn) {
            $(btn).parent().parent().remove();
            sum();
        }


        $(function() {
            $('#datetimepicker3').datetimepicker({
                locale: 'zh-cn',
                viewMode: 'days',
                format: 'YYYY-MM-DD'
            });

            $('#add').click(function() {
                $('#addTr').after(`
                <tr >
                <td>
                    <input type="text" class="form-control">
                </td>
                <td>
                    <input type="number" class="form-control money" οnblur="sum()">
                </td>
                <td>
                    <button type="button" class="btn btn-default del" οnclick="del(this)">删除</button>
                </td>
            </tr>
                `);
            })
        });
    </script>
</body>

</html>

日期选择组件bootstrap-datetimepicker依赖jquery和moment.js。
点击增加按钮，增加一行。
点击删除按钮，删除该行，重新计算合计。
onblur表示失去焦点事件，当金额输入框失去焦点后，计算合计。$.each遍历全部金额输入框，parseFloat将输入框的值转为float类型。
js中多行字符串用``表示。
label标签中 for=“dept”，指向id为dept的输入框。点击label标签，焦点落在dept输入框中。
οnclick="del(this)"中this代表button元素。