Bootstrap Snippet Dynamic table input add and sum using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div class="pull-right">
                <button type="button" class="btn btn-warning btn-sm addRow"><i class="fa fa-plus-circle"></i> 增加項目</button>
                <div class="clearfix"></div>
            </div>
            <div class="table-wrap">
                <table id="sponsorTable" class="table table-condensed table-striped table-hover">
                    <thead>
                        <tr class="warning">
                            <th width="35%" class="text-center" scope="col">商品名稱</th>
                            <th width="20%" class="text-center" scope="col">市 價</th>
                            <th width="15%" class="text-center" scope="col">贊助份數</th>
                            <th width="20%" class="text-center" scope="col">小 計</th>
                            <th width="10%" scope="col">·</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="item">
                            <td data-label="商品名稱">
                                <input type="text" name="sponsor" class="form-control" />
                            </td>
                            <td data-label="市 價">
                                <div class="input-group">
                                  <div class="input-group-addon">$</div>
                                  <input type="number" name="price" class="form-control price amount" min="0" />
                                </div>
                            </td>
                            <td data-label="贊助份數">
                                <input type="number" name="quantity" class="form-control qnty amount" min="1" />
                            </td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
  font-family: "Microsoft JhengHei", "Open Sans", sans-serif;
  line-height: 1.25;
}
@media screen and (max-width: 600px) {
    .table-wrap table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
    .table-wrap table tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: .625em;
    }
    .table-wrap table td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: .8em;
        text-align: right;
    }
    .table-wrap table td::before {
        /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
        margin-right: 5px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* main function when page is opened  */
    $(document).ready(function () {
        /* function for adding a new row */
        var r = 0;
        $(".addRow").on("click", function () {
            r++;
            $("#sponsorTable").append(
                '<tr id="row' +
                r +
                '" class="item"><td data-label="商品名稱"><input type="text" name="sponsor" class="form-control" /></td><td data-label="市 價"><div class="input-group"><div class="input-group-addon">$</div><input type="number" name="price" class="form-control price amount" min="0" /></div></td><td data-label="贊助份數"><input type="number" name="quantity" class="form-control qnty amount" min="1" /></td><td data-label="小 計"><input type="number" name="total" class="form-control total" id="total1" readonly /></td><td data-label="·"><button type="button" name="remove" id="' +
                r +
                '" class="btn btn-success btn-sm btn_remove"><i class="fa fa-trash-o"></i> 刪除</button></td></tr>'
            );
        });
        /* remove row when X is clicked */
        $(document).on("click", ".btn_remove", function () {
            var button_id = $(this).attr("id");
            $("#row" + button_id + "").remove();
        });
        /* calculate everything  */
        $(document).on("keyup", ".amount", calcAll);
        /* $(".amount").on("change", calcAll);  */
    });
    /* function for calculating everything  */
    function calcAll() {
        /* calculate total for one row  */
        $(".item").each(function () {
            var qnty = 0;
            var price = 0;
            var total = 0;
            if (!isNaN(parseFloat($(this).find(".qnty").val()))) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Dynamic table input add and sum"
Bootstrap 3.3.0 Snippet by calvin52019

Related: See More

Questions / Comments:

"Dynamic table input add and sum" Bootstrap 3.3.0 Snippet by calvin52019

Related: See More

Questions / Comments:

"Dynamic table input add and sum"
Bootstrap 3.3.0 Snippet by calvin52019