jquery - 具有行和编辑功能的引导模式

Question

我想让我的引导模式能够编辑特定的行

我做了什么:
1)我可以使用“删除功能”添加多行
2) 尝试使用#edit_row 和新表来显示，当我点击按钮时没有出现。 HTML

<table class="table table-bordered" id="pledge_table">
            <thead>
              <tr>
                <!--<th scope="col"></th>-->
                <th scope="col">Product Type</th>
                <th scope="col">Category</th>
                <th scope="col">Qty</th>
                <th scope="col">Quality</th>
                <th scope="col">Gold Rate</th>
                <th scope="col">Weight</th>
                <th scope="col">Item Remarks</th>
                <th scope="col">Assessed Value</th>
                <th scope="col">Pledge Amount</th>
                <th scope="col"><button type="button" name="age" id="add_item" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-success">Add Row</button></th>
              </tr>
            </thead>
            <tbody id="pledge_item">
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="9" align="right">Max.Pledge%</td>
                    <td><input class="form-control" name="parent_max_pledge" readonly/></td>
                </tr>
                <tr>
                    <td colspan="9" align="right">Total Assessed Value</td>
                    <td><input class="form-control" name="parent_total_assessed_val" readonly/></td>
                </tr>
                <tr>
                    <td colspan="9" align="right">Total Pledge Amount</td>
                    <td><input class="form-control" name="parent_total_pledge_amt" readonly/></td>
                </tr>
                <tr>
                    <td colspan="9" align="right">Gross Weight</td>
                    <td><input class="form-control" name="parent_gross_weight" readonly/></td>
                </tr>
                <tr>
                    <td colspan="9" align="right">Total Quantity</td>
                    <td><input class="form-control" name="parent_total_qty" readonly/></td>
                </tr>
                <tr>
                    <td colspan="9" align="right">Stg Fee Per Mth</td>
                    <td><input class="form-control" name="parent_stg_fee_per_mth" readonly/></td>
                </tr>
            </tfoot>
        </table>
    </div>

    <!--Bootstrap Modal-->
    <div id="add_data_Modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Pledge Item</h4>
                </div>
                <div class="modal-body">
                    <tr id="child_pledge_item">
                        <?php echo form_open(""); ?>
                            <tr>
                                <td>
                                    <?php
                                    $options = array(
                                                     '' => '~Select Product~'
                                                     );
                                    foreach ($product as $prod){
                                        $options[$prod->product_id] = $prod->product_type;
                                    }

                                    $select = array(
                                                    'name' => 'child_product_type[]',
                                                    'id'    => 'child_product_type',
                                                    'class' => 'form-control form-pledge-item',
                                                    'required' => 'required'
                                                    );
                                    echo form_dropdown('child_product_type[]', $options,set_value('product_type'),$select);
                                ?>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <?php
                                    $options = array(
                                                     '' => '~Select Category~'
                                                     );
                                    foreach ($category as $categ){
                                        $options[$categ->category_id] = $categ->category_code;
                                    }

                                    $select = array(
                                                    'name' => 'child_category_code[]',
                                                    'id'    => 'child_category_code',
                                                    'class' => 'form-control form-pledge-item',
                                                    'required' => 'required'
                                                    );
                                    echo form_dropdown('child_category_code[]', $options,set_value('category_code'),$select);
                                ?>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <input type="number" name="child_qty[]" id="child_qty" class="form-control form-pledge-item" placeholder="Quantity" min="0" required/>
                                </td>
                            </tr><br>
                            <tr>
                                <td id="col_quality">
                                    <input type="number" id="child_quality_name" name="child_quality_name[]" class="quality_id form-control form-pledge-item" step="any" value="" placeholder="Quality" readonly/>
                                    <input type="hidden" id="child_quality" name="child_quality[]" class="quality_id form-control form-pledge-item" step="any" value="" readonly/>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <input type="number" name="child_gold_rate[]" id="child_gold_rate" class="form-control form-pledge-item" placeholder="Gold Rate/gm" min="0" step="any"/>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <input type="number" name="child_weight[]" id="child_weight" class="form-control form-pledge-item" placeholder="Weight" min="0" step="any"/>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <textarea type="text" name="child_item_remarks[]" id="child_item_remarks" class="form-control form-pledge-item" placeholder="Item Remarks"></textarea>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <input type="number" name="child_assessed_value[]" id="child_assessed_value" class="form-control form-pledge-item" placeholder="Assessed Value" min="0" step="any"/>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <input type="number" name="child_pledge_amt[]" id="child_pledge_amt" class="form-control form-pledge-item" placeholder="Pledge Amount" min="0" step="any"/>
                                </td>
                            </tr><br>
                            <button type="button" class="btn btn-primary col-md-12" id="add_row">Add</button>
                            <!--<button name="submit" id="add_row" value="submit" class="btn btn-info col-md-12"> Add Item</button>-->
                            <!--<a class="btn btn-info col-md-12" href="<?php echo base_url() .'index.php/Test/AddCart/'; ?>">&nbsp&nbsp&nbsp<i class="fa fa-money" aria-hidden="true"></i> Add</a>-->
                            <br>
                        <?php echo form_close(); ?>
                    </tr>
                </div>
                <div class="modal-footer">
                    <button  type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

用于添加行的 Jquery

    <script>
        $(document).ready(function(){
            var n = 1;
            //var product_type = $('#child_product_type').val();
            //var category_code = $('#child_category_code').val();
            //var qty = $('#child_qty').val();
            //var quality = $('#child_quality').val();
            //var gold_rate = $('#child_gold_rate').val();
            //var weight = $('#child_weight').val();
            //var assessed_val = $('#child_assessed_value').val();
            //var pledge_amt = $('#child_pledge_amt').val();
            $('#add_row').click(function(){
                //e.preventDefault();
                //alert('YES');

                if(n <= 4){
                    var cols = "";

                    cols += '<tr id="item_row">';
                    //cols += '<td><input type="hidden" value="'+ n +'"/></td>';
                    //cols += '<td><select id="product_type" class="form-control form-pledge-item" name="product_id[]" required><option value="" selected="selected">'+$("#product_type").children("option:selected").text()+'</option><?php foreach($product as $rows):?><option value="<?php echo $rows->product_id?>"><?php echo $rows->product_type?></option><?php endforeach;?></select></td>';
                    cols += '<td><input type="text" name="product_type" class="form-control" value="'+$("#child_product_type").children("option:selected").text()+'" readonly/><input type="hidden" name="parent_product_type[]" class="form-control" value="'+$("#child_product_type").val()+'" readonly/></td>';
                    cols += '<td><input type="text" name="category_code" class="form-control" value="'+$("#child_category_code").children("option:selected").text()+'" readonly/><input type="hidden" name="parent_category_code[]" class="form-control" value="'+$("#child_category_code").val()+'" readonly/></td>';
                    cols += '<td><input type="text" name="parent_qty[]" class="form-control" value="'+$("#child_qty").val()+'" readonly/></td>';
                    cols += '<td><input type="text" name="parent_quality[]" class="form-control" value="'+$("#child_quality").val()+'" readonly/></td>';
                    cols += '<td><input type="text" name="parent_gold_rate[]" class="form-control" value="'+$("#child_gold_rate").val()+'" readonly/></td>';
                    cols += '<td><input type="text" name="parent_weight[]" class="form-control" value="'+$("#child_weight").val()+'" readonly/></td>';
                    cols += '<td><input type="text" name="parent_item_remarks[]" class="form-control" value="'+$("#child_item_remarks").val()+'" readonly/></td>';
                    cols += '<td><input type="text" name="parent_assessed_value[]" class="form-control" value="'+$("#child_assessed_value").val()+'" readonly/></td>';
                    cols += '<td><input type="text" name="parent_pledge_amt[]" class="form-control" value="'+$("#child_pledge_amt").val()+'" readonly/></td>';
                    cols += '<td><a id="remove" name ="remove" class="btn btn-danger">Remove</a></td>';
                    cols += '</tr>';

                    $('#pledge_item').append(cols);
                    n++;
                }
                //make the modal dismiss (no need data-target)
                $('#child_product_type,#child_category_code,#child_qty,#child_quality,#child_gold_rate,#child_weight,#child_item_re`enter code here`marks,#child_assessed_value,#child_pledge_amt').val("");
                $('#add_data_Modal').modal('hide');
            });

Able to edit specific row
This is my image : https://prnt.sc/p4iq2j
after click on add row : https://prnt.sc/p4iqah

Answer 1

当我检查时，我发现了一个 html 错误

你需要在表格标签内包裹tr标签

            <div class="modal-body">
                <table>
                    <tr id="child_pledge_item">
                        <?php echo form_open(""); ?>
                            <tr>
                                <td>
                                    <?php
                                    $options = array(
                                                     '' => '~Select Product~'
                                                     );
                                    foreach ($product as $prod){
                                        $options[$prod->product_id] = $prod->product_type;
                                    }

                                    $select = array(
                                                    'name' => 'child_product_type[]',
                                                    'id'    => 'child_product_type',
                                                    'class' => 'form-control form-pledge-item',
                                                    'required' => 'required'
                                                    );
                                    echo form_dropdown('child_product_type[]', $options,set_value('product_type'),$select);
                                ?>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <?php
                                    $options = array(
                                                     '' => '~Select Category~'
                                                     );
                                    foreach ($category as $categ){
                                        $options[$categ->category_id] = $categ->category_code;
                                    }

                                    $select = array(
                                                    'name' => 'child_category_code[]',
                                                    'id'    => 'child_category_code',
                                                    'class' => 'form-control form-pledge-item',
                                                    'required' => 'required'
                                                    );
                                    echo form_dropdown('child_category_code[]', $options,set_value('category_code'),$select);
                                ?>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <input type="number" name="child_qty[]" id="child_qty" class="form-control form-pledge-item" placeholder="Quantity" min="0" required/>
                                </td>
                            </tr><br>
                            <tr>
                                <td id="col_quality">
                                    <input type="number" id="child_quality_name" name="child_quality_name[]" class="quality_id form-control form-pledge-item" step="any" value="" placeholder="Quality" readonly/>
                                    <input type="hidden" id="child_quality" name="child_quality[]" class="quality_id form-control form-pledge-item" step="any" value="" readonly/>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <input type="number" name="child_gold_rate[]" id="child_gold_rate" class="form-control form-pledge-item" placeholder="Gold Rate/gm" min="0" step="any"/>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <input type="number" name="child_weight[]" id="child_weight" class="form-control form-pledge-item" placeholder="Weight" min="0" step="any"/>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <textarea type="text" name="child_item_remarks[]" id="child_item_remarks" class="form-control form-pledge-item" placeholder="Item Remarks"></textarea>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <input type="number" name="child_assessed_value[]" id="child_assessed_value" class="form-control form-pledge-item" placeholder="Assessed Value" min="0" step="any"/>
                                </td>
                            </tr><br>
                            <tr>
                                <td>
                                    <input type="number" name="child_pledge_amt[]" id="child_pledge_amt" class="form-control form-pledge-item" placeholder="Pledge Amount" min="0" step="any"/>
                                </td>
                            </tr><br>
                            <button type="button" class="btn btn-primary col-md-12" id="add_row">Add</button>
                            <!--<button name="submit" id="add_row" value="submit" class="btn btn-info col-md-12"> Add Item</button>-->
                            <!--<a class="btn btn-info col-md-12" href="<?php echo base_url() .'index.php/Test/AddCart/'; ?>">&nbsp&nbsp&nbsp<i class="fa fa-money" aria-hidden="true"></i> Add</a>-->
                            <br>
                        <?php echo form_close(); ?>
                    </tr>
                </table>
            </div>

这可能会解决您的问题。