jquery - 单击表格行时创建模式

Question

我如何创建一个模式，用户可以在其中编辑表格内选定行的内容？有人可以教我如何做到这一点吗？我对网络开发有点陌生，我只需要按照要求这样做。谢谢!

这是我的代码(HTML):

<div class="row">
    <div class="col-xs-12 col-md-12">
        <table class="table table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>

            </tr>
            <tr>
                <td>Sam</td>
                <td>Smith</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

好的。这是简单的DEMO 使用基于 Bootstrap 的模式，下面是代码:

<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-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">EDIT</h4>
      </div>
      <div class="modal-body">
        <p><input type="text" class="input-sm" id="txtfname"/></p>
        <p><input type="text" class="input-sm" id="txtlname"/></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

相关JS

$('table tbody tr  td').on('click',function(){
    $("#myModal").modal("show");
    $("#txtfname").val($(this).closest('tr').children()[0].textContent);
    $("#txtlname").val($(this).closest('tr').children()[1].textContent);
});

注意 -这只是一个简单的演示!您需要根据您的需要进行修改!!