Question

我在bootstrap中有一个表单。它显示的数据类似于TODO列表。我可以添加包含数据的行，但无法编辑和保存表中的数据。我的要求是：单击编辑按钮时，更改的数据将保存到表中。

这是我的代码：

<script type="text/javascript">
$(document).ready(function () {
    $('#submit').prop('disabled', true).removeClass("btn btn-block btn-lg btn-primary").addClass("btn btn-block btn-lg btn-default");

    $('#btn_AddToList').click(function () {

        $('#submit').prop('disabled', true).removeClass("btn btn-block btn-lg btn-info").addClass("btn btn-block btn-lg btn-default");
        var val = $('#myselect').val();

        var val2 = $('#txt_Region').val();
        var val3 = $('#txt_Regio').val();
        var val4 = $('#txt_Regi').val();
        $('#lst_Regions').append('<tr><td>' + val2 + '</td>' + '<td>' +     val3 + '</td>' + '<td>' + val4 + '</td><td><button type="submit" class="api_key_edit btn btn-small btn-primary" style="width: 35px" value="31" onclick="edit()"><span class="glyphicon glyphicon-pencil"></span></button>&nbsp;&nbsp;<button type="submit" class="api_key_delete btn btn-small btn-danger" data-title="Delete" data-toggle="modal" data-target="#delete" style="width: 35px" value="31" onclick="deleteRow($(this))"><span class="glyphicon glyphicon-remove"></span></button></td></tr>');

        $('#btn_AddToList1').click(function () {
        $('#submit').prop('disabled', false).removeClass("btn btn-block btn-lg btn-default").addClass('btn btn-block btn-lg btn-info');
            $('tbody').on('#myselect', function () {
                $(".table-body").html($("#table-lst-regions").html());
            });
        });
    });
});

//
$(".btn-primary").click(function(){
    $(".collapse").collapse('toggle');
});

function deleteRow(row)
{
    row.closest('tr').remove();
}
function edit(lst_Regions)
{
    //$(this).parents('tr');
    row.closest('tr').edit();
}

function save()
{
    $('#lst_Regions').append('<tr><td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td><td></td></tr>');
}

</script>

HTML

    <center><button href="#myModal" id="openBtn" style="background-color: #F0E68C; border: plum;" data-toggle="modal" class="btn btn-default"><span class="glyphicon glyphicon-filter" style="width: 30px; height: 20px; background-color: cornsilk;"></span></button></center>
    <div class="modal fade" id="myModal">
         <div class="modal-dialog">
             <div class="modal-content">
                <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
               <h3 class="modal-title">Enter Product Details</h3>
        </div>
        <div class="modal-body">

            <h4><center> Request Products</center></h4>

            <center><div class="btn-group">
                <div class="well" style="width:180px;"> <label><h5>Product</h5></label></div>
                <select name="mySelect" id="txt_Region"  class="form-control dropdown-select" data-style="btn-warning">
                    <option value="">[-None-]</option>
                    <option> Soft-small</option>
                    <option>Soft-big</option>
                    <option>Soft-hard</option>
                    <option>others</option>
                </select>
            </div>

                <div class="btn-group">
                    <div class="well" style="width:180px;"> <label><h5>Min. Exp.</h5></label></div>
                    <select name="mySelect"  id="txt_Regio" class="form-control dropdown-select" data-style="btn-warning">
                        <option value="">[-None-]</option>
                        <option>0-30</option>
                        <option>30-60</option>
                        <option>60-90</option>
                    </select>
                </div>

                <div class="btn-group">
                    <div class="well" style="width:180px;"><label><h5>Quantity</h5></label></div>
                    <select name="mySelect" id="txt_Regi" class="form-control dropdown-select" data-style="btn-warning">
                        <option value="">[-None-]</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>

            </center></div>


        <tr>
            <td></td>
            <td></td>
            <td></td><br>
            <br>
            <td>
                <input type="button" name="add" id="btn_AddToList" value="add" class="btn btn-primary"  />
                <input type="button" name="Done" id="btn_AddToList1" value="Save" class="btn btn-success" onclick="save()" />
                <div id="divMsg" style="display:none;"> <i class="fa fa-key"></i>

                </div>
            </td>
        </tr>
        </table>
        </center>
        <br />
        <center>
            <div id="table-lst-regions">
                <table id="lst_Regions" style="width: auto;" border="2" class="table table-striped table-bordered table-condensed"  data-url="data1.json" data-height="299">
                    <tr>
                        <td><b>Product</b>

                        </td>

                        <td><b>Min.Exp.</b>

                        </td>

                        <td><b>Quantity </b>

                        </td>
                        <!--<td>-->
                        <!--<button type="submit"  class="api_key_edit btn btn-small btn-primary" value="31">Edit</button>-->
                        <!--<button type="submit" class="api_key_delete btn btn-small btn-danger" value="32">Delete</button>-->
                        <!--</td>-->
                    </tr>
                </table>
            </div>
        </center>

我正在为这项任务工作一周，但无法解决。有谁知道怎么做？

Answer 1

您可以执行的操作与删除功能相同。首先，在你的html上添加与删除相同的内容。

onclick="edit($(this))"

然后将功能编辑更改为：

function edit(row)
{
    //$(this).parents('tr');
    row.closest('tr').edit();
}

让我知道这段代码的作用。

jquery编辑保存按钮功能不起作用

1 个答案: