Question

如何创建用户可以编辑表格中所选行内容的模式？有人可以教我如何做到这一点？我在Web开发方面有点新意，我只需要这样做。谢谢！

这是我的代码（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

确定。以下是基于bootstrap的模式的简单 DEMO ，下面是代码：

<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);
});

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

Answer 2

这是一个简单的模态，没有任何过渡或动画或内容。基本上你构建一个容器，将它放在屏幕的中心，然后在点击时隐藏并显示它（动画显示它，动画出来）。

这是一个有效的傻瓜：http://plnkr.co/edit/0hHcW4Es46VrHEZkme8m

<style>
    .modal{
        background-color: #fff;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 400px;
        width: 600px;
        z-index: 1000;
        display: none;
    }

    .overlay{
        background-color: rgba(0,0,0,0.6);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        display: none;
    }
</style>

<div class="overlay" id="overlay"></div>
<div class="modal" id="modal"></div>

(function(document){
    var modal = document.getElementById('modal');
    var overlay = document.getElementById('overlay');
    var clickElement = //select whatever you want to trigger the click

    var openModal = function(){
        modal.style.display = 'block';
        overlay.style.display = 'block';
    };

    var closeModal = function(){
        modal.style.display = 'none';
        overlay.style.display = 'none';
    };

    clickElement.addEventListener('click', openModal);
    overlay.addEventListener('click', closeModal);
})(document);

单击表行时创建模态

2 个答案: