Jquery 单击表行时创建模式

Jquery 单击表行时创建模式,jquery,bootstrap-modal,Jquery,Bootstrap Modal,我将如何创建一个模式,用户可以在其中编辑表中所选行的内容?有人能教我怎么做吗?我在web开发方面有点新手,我只需要作为一个需求来做这件事。谢谢 以下是我的代码(HTML): 名字 姓氏 约翰 雌鹿 山姆 史密斯 这是一个简单的模式,没有任何过渡、动画或内容。基本上,您可以构建一个容器,将其放置在屏幕的中心,然后在单击时隐藏并显示它(在其中设置动画,在其中设置动画) 这是一个工作的PRUNKR: .莫代尔{ 背景色:#fff; 位置:固定; 最高:50%; 左:50%; 转换:翻译(-50%,

我将如何创建一个模式,用户可以在其中编辑表中所选行的内容?有人能教我怎么做吗?我在web开发方面有点新手,我只需要作为一个需求来做这件事。谢谢

以下是我的代码(HTML):


名字
姓氏
约翰
雌鹿
山姆
史密斯

这是一个简单的模式,没有任何过渡、动画或内容。基本上,您可以构建一个容器,将其放置在屏幕的中心,然后在单击时隐藏并显示它(在其中设置动画,在其中设置动画)

这是一个工作的PRUNKR:


.莫代尔{
背景色:#fff;
位置:固定;
最高:50%;
左:50%;
转换:翻译(-50%,-50%);
高度:400px;
宽度:600px;
z指数:1000;
显示:无;
}
.覆盖{
背景色:rgba(0,0,0,0.6);
位置:固定;
排名:0;
左:0;
宽度:100%;
身高:100%;
z指数:999;
显示:无;
}
(职能(文件){
var modal=document.getElementById('modal');
var overlay=document.getElementById('overlay');
var clickElement=//选择要触发单击的内容
var openModal=function(){
modal.style.display='block';
overlay.style.display='block';
};
var closeModal=函数(){
modal.style.display='none';
overlay.style.display='none';
};
clickElement.addEventListener('click',OpenModel);
overlay.addEventListener(“单击”,关闭模式);
})(文件);

这是一个简单的模式,没有任何过渡、动画或内容。基本上,您可以构建一个容器,将其放置在屏幕的中心,然后在单击时隐藏并显示它(在其中设置动画,在其中设置动画)

这是一个工作的PRUNKR:


.莫代尔{
背景色:#fff;
位置:固定;
最高:50%;
左:50%;
转换:翻译(-50%,-50%);
高度:400px;
宽度:600px;
z指数:1000;
显示:无;
}
.覆盖{
背景色:rgba(0,0,0,0.6);
位置:固定;
排名:0;
左:0;
宽度:100%;
身高:100%;
z指数:999;
显示:无;
}
(职能(文件){
var modal=document.getElementById('modal');
var overlay=document.getElementById('overlay');
var clickElement=//选择要触发单击的内容
var openModal=function(){
modal.style.display='block';
overlay.style.display='block';
};
var closeModal=函数(){
modal.style.display='none';
overlay.style.display='none';
};
clickElement.addEventListener('click',OpenModel);
overlay.addEventListener(“单击”,关闭模式);
})(文件);

好的。下面是基于引导模式的简单,下面是代码:

<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 -->

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

好的。下面是基于引导模式的简单,下面是代码:

<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)更改为在按钮或图像上工作,而不是在表tbody tr。。。。请将
$('table tbody tr td')
替换为您的
按钮/图像
-
id
,就像在说
按钮id
btnOpen
,您可以写
$('table tbody tr td')。在('click'…
您好,这段代码真的很有效,所以我很高兴。我为此花费了太多时间:)我想知道如何更改单击功能(JS)要在按钮或图像上工作,而不是在桌子上,请用你的
按钮/图像替换
$('table tbody tr td')
id
,就像在说
按钮id
btnOpen
,你可以写
$('#btnOpen')。在('click'.
<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 -->
$('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);
});