0

我在表中使用了 MD 选择（mdbootstrap），但在克隆后我很难让它工作。它显示正确，但在新克隆的行中看起来无法。我曾尝试在克隆（ $('.mdb-select').material_select(); ）后使用 jQuery 启动它，但它会将克隆行中的选择控件复制两次。

这是我的html代码：

<table class="table table-sm table-bordered table-hover " id="tab_logic">
                <thead>
                <tr>
                    <th class="text-center"> # </th>
                    <th class="text-center"> Product </th>
                    <th class="text-center"> Qty </th>
                    <th class="text-center"> Price </th>
                    <th class="text-center"> Total </th>
                    <th class="text-center">Action</th>
                </tr>
                </thead>
                <tbody >
                <tr id='addr0'>
                    <td>1</td>
                    <td><!-- Material input -->
                        <select id="product[]" name="product[]" class="mdb-select md-form form-sm">
                            <option value="1">Option 1</option>
                            <option value="2">Option 2</option>
                            <option value="3">Option 3</option>
                            <option value="4">Option 4</option>
                        </select>
                    </td>
                    <td><div class="md-form form-sm">
                        <input type="text" name='qty[]' id="qty[]"  class=" form-fixer form-control qty inputf text-right text-right allow_decimal" step="0" min="0">

                        </div>
                    </td>

                   <td><div class="md-form form-sm">
                        <input type="number" name='price[]' id="price[]"  class="form-control price inputf text-right allow_decimal" step="0.00" min="0">

                        </div>
                    </td>

                    <td ><div class="md-form form-sm text-right">
                        <input type="number" name='total[]' id="total[]"  placeholder='0.00' class="form-control total inputf text-right" readonly/>

                        </div>
                    </td>
                    <td class="text-right" >

                      <a class="btn-floating btn-sm red del "><i class="fa fa-trash"></i></a>

                                    </td>
                                    </tr>
                                    </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-md-12">
                                    <button id="add_row" class="btn btn-default pull-left">Add Row</button>

                                </div>
                            </div>
                            <div class="row clearfix" style="margin-top:20px">
                                <div class="pull-right col-md-4">
                                    <table class="table table-bordered table-hover" id="tab_logic_total">
                                        <tbody>

                                            <tr>
                                                <th class="text-center">Grand Total</th>
                                                <td class="text-center">
                                                    <input type="number" name='total_amount' id="total_amount" placeholder='0.00' class="form-control" readonly/>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

和我的 jQuery 代码：

$(document).ready(function() {
            $('.mdb-select').material_select();

            $("#add_row").on('click', function(e) {
                var i = +$('#tab_logic tbody tr:last td:first').text();
                var clonedRow = $('#tab_logic tbody tr:last').clone()
                    .find('td:first').text(i + 1).closest('tr').attr('id', 'addr' + i)
                    .find('input').val('').closest('tr');

                $('#tab_logic tbody').append(clonedRow);

            });

            $('#tab_logic').on('click', '.del', function(e) {
                if ($(this).closest('tr').siblings().length > 0) {
                    $(this).closest('tr').remove();
                    calc_total();
                }
            });

            $('#tab_logic tbody').on('keyup change', function(e) {
                calc();
            });

如果您找到解决我问题的技巧，请提前感谢...

4

0 回答 0