以模态形式编辑表行数据

Question

我有一个脚本，当我单击“添加”按钮时，将弹出模式窗体，然后您提交数据，它将在表中追加行，并将添加的数据插入到行中。

我的剧本：

    <script>
    $(function () {
    /* function for dynamic numbering */
    function updateRowOrder() {
        $('td.id').each(function (i) {
            $(this).text(i + 1);
        });
    }
    /* if input textValue get press keyboard enter */
    $("#textValue").keydown(function (e) {
        if (e.keyCode == 13) {
            /* if get so trigger to addBtn */
            $("#addBtn").trigger("click");
            $(this).val("");
        }
    });
    $(document).on("click", "#save, .delRow", function (e) {
        /* if document clicked is addBtn */
        if ($(this).is("#save")) {
            /* Append template script to table tbody */
            $($("#template").html()).appendTo("#dataTables-example tbody");
            /* Append textValue value to class rowValue and change classname */
            $(".rowValue").append($("#textValue").val()).attr("class", "rowValues");
            $(".taskValue").append($("#task").val()).attr("class", "taskValues");
            $(".ProleValue").append($("#primaryRole").val()).attr("class", "roleValues");
            var appendComma = ($(".SroleValue").val() == '') ? '' : ', ';
            $(".SroleValue").append(appendComma + $("#secondaryRole").val()).attr("class", "roleValues");
            /* Update Numbering */
           updateRowOrder();
        }
        else {
            /* Just remove the tr on the click of a mouse */
            $(this).closest("tr").remove();
            /* Update Numbering */
            updateRowOrder();
        }
        $('.up, .down').click(function(e){
            e.preventDefault();

            var row = $(this).parents("tr:first"); 
            if ($(this).is(".up")) {
                row.insertBefore(row.prev());
            } 
            else if ($(this).is(".down")){
                row.insertAfter(row.next());
            }
            else{

            }
            $('tbody tr[class="move"] td:first-child').each(function(idx, item) {
                $(this).text(idx+1);
            });
        });

        $('.edit').click(function(){
            //get id, by a simple method of finding the element
            id = $(this).parents('tr').find('td:first').text();
           $('#myModalEdit').html(
            '<div class="row">' +
             '<div class="col-lg-12">' +
                '<div class="panel panel-success">' +
                        '<div class="panel-heading">' +
                            'Edit' +
                        '</div>' +
                        '<div class="panel-body">' +
                            '<div class="table-responsive">' +
                                '<table class="table table-bordered" id="dataTables-example">' +
                                    '<thead>' +
                                        '<tr>' +
                                            '<td>Order</td>' +
                                            '<td>'+ id +'</td>' +
                                        '</tr>' +
                                        '<tr>' +
                                            '<td>Activity</td>' +
                                            '<td><input type="text" value="'+ $ (this).parents('tr').find('td:nth-child(2)').text() +'"/></td>' +
                                        '</tr>' +
                                        '<tr>' +
                                        '<td>Task Code</td>' + 
                                        '<td>' +
                                            '<select name="" id="task" class="form-control">' +
                                                '<option value="defalut" disabled="disabled" selected="selected"></option>' +
                                                <?php
                                                foreach($tasktype as $task)
                                                {
                                                    ?>
                                                    '<option value="<?php echo $task['TaskCode'];?>"><?php echo $task['TaskCode'];?></option>' +
                                                    <?php
                                                }
                                                ?>
                                        '</select>' +
                                        '</td>' +
                                        '</tr>' +
                                   '</thead>' +
                                '</table>' +
                                '<button type="submit" class="btn btn-success change" value="'+ id +'">Save Changes</button>' + 
                            '</div>' +
                        '</div>' +
                  '</div>' +
                '</div>' +
            '</div>'
            );
        });

        //change text
        $('.change').click(function(){
           //get id via button value
            id = $(this).val();
            //get the closest input text
            new_text = $(this).siblings('input[type="text"]').val();

            //find the specific tr that has an id of.. and look for the corresponding td to change, please read about eq() in jquery
            $('#template script').find('tr#' + id).find('td').eq('1').text(new_text);
        });

        /* clearing input textValue */
        $("#textValue").val("");
        var d = $('select option:disabled').prop('disabled', '');
        $('select').val(0);
        d.prop('disabled', 'disabled');
    });
});
</script>

而且，当我追加表格行时，它还将插入编辑按钮以及我插入的数据。

这是我的表，其中插入了添加数据：

<table class="table table-bordered" id="dataTables-example">
                            <thead>
                                    <tr>
                                        <td>Order</td>
                                        <td>Activity</td>
                                        <td>Task Code</td>
                                        <td>Primary Role Code</td>
                                        <td>Secondary Role Code</td>
                                    </tr>
                            </thead>
                            <tbody>
                                <script id="template" type="text/template">
                                <tr class="move"> 
                                    <td class="id"></td> 
                                    <td><p class="rowValue"></p></td>
                                    <td><p class="taskValue"></p></td>
                                    <td><p class="ProleValue"></p></td>
                                    <td><p class="SroleValue"></p></td>
                                    <td><a href="#" class="edit"><i class="fa fa-edit fa-fw"></i></a>
                                        <a href='#' class="delRow"><i class="fa fa-trash-o fa-fw"></i></a>
                                    </td>
                                    <td>

                                        <a href='#' class="up"><i class="fa fa-arrow-up fa-fw"></i></a>
                                        <a href="#" class="down"><i class="fa fa-arrow-down fa-fw"></i></a>
                                    </td>
                                </tr> 
                                </script>
                            </tbody>
                            </table>

这是我的模态形式：

<form name="stuff">
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="false">
                        &times;
                    </button>
                    <h3 class="modal-title" id="myModalLabel">Add</h3>
                </div>
                <div class="modal-body">
                    <form name="modal-form" class="form-horizontal">
                        <!-- form stuff goes here -->
                         <table class="table table-bordered" id="dialog-form">
                            <thead>
                                <tr>
                                    <td>Activity</td>
                                    <td><input type="text" id="textValue" class="typeahead form-control"/></td>
                                </tr>
                                <tr>
                                    <td>Task Code</td> 
                                    <td>
                                        <select name="" id="task" class="form-control">
                                            <option value="defalut" disabled="disabled" selected="selected"></option>
                                            <?php
                                            foreach($tasktype as $task)
                                            {
                                                ?>
                                                <option value="<?=$task['TaskCode']?>"><?=$task['TaskCode']?></option>
                                                <?php
                                            }
                                            ?>
                                    </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Primary Role Code</td>
                                    <td>
                                        <select id="primaryRole" class="form-control">
                                            <option value="defalut" disabled="disabled" selected="selected"></option>
                                            <?php
                                            foreach($rolecode as $role)
                                            {
                                                ?>
                                                <option value="<?=$role['RoleName']?>"><?=$role['RoleName']?></option>
                                                <?php
                                            }
                                            ?>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Secondary Role Code</td>
                                    <td>
                                      <select id="secondaryRole" class="form-control" multiple="multiple" style="width:400px;">
                                        <option></option>
                                        <?php
                                            foreach($rolecode as $role)
                                            {
                                                ?>
                                                <option value="<?=$role['RoleName']?>"><?=$role['RoleName']?></option>
                                                <?php
                                            }
                                        ?>
                                      </select>
                                    </td>
                                </tr>
                            </thead>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close
                    </button>
                    <button type="button" type="submit" class="btn btn-primary" id="save" data-dismiss="modal">
                        Create
                    </button>
                </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        </form>

Answer 1

这应该使您对如何执行此操作有深入的了解。

请注意， .live应该是新创建的编辑按钮的.on事件

然后在编辑功能上，您可以使用可以应用此类数据属性的任何引用，以便可以轻松拉出它们，然后在模态中应用详细信息

请在这里查看演示

更新了演示，添加了附加功能和带有注释的按钮