Jquery 使用表单数据在模态中动态设置文本？

我正在做一个网站，我有一些麻烦

在一个页面上有一个名称表，类似于：

<table class="table" id="table">
    <thead>
        <tr>
            <th id="name">Teacher</th>
            <th id="courses">Courses</th>
        </tr>
    </thead>
<tbody>
<tr>
    <td><a data-toggle="modal"  href="#myModal" id="1">Katherine Crowley</a></td>
    <td>English</td>
</tr>
<tr>
    <td><a data-toggle="modal"  href="#myModal" id="2">Seraphine Hamilton</a></td>
    <td>English</td>
</tr>

老师
课程
英语
英语

有更多的条目，但这是一个很好的例子。在本例中，当您单击表中的名称“Katherine Crowley”时，会打开一个模式，我想在其中了解此人的信息。以下是模式的代码：

<div class="modal" 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>
      <h4 class="modal-title" href="#name"></h4>
    </div><div class="container"></div>
    <div class="modal-body">
      Content
      <br>
      <br>
      <br>
      <p>more content</p>
      <br>
      <br>
      <br>
    </div>
    <div class="modal-footer">
      <a href="#" data-dismiss="modal" class="btn">Close</a>
      <a href="#" class="btn btn-primary">Save changes</a>
    </div>
  </div>
</div>

×
内容






更多内容

这样做的想法是，模式的标题将设置为人员的姓名，然后在内容区域中列出课程

有人知道我怎么做吗

我对所有这些都是相当陌生的，所以尽可能多的细节将不胜感激

谢谢

---

编辑：查看下面的评论。丹评论了另一个问题的链接，在那里我找到了我想要的东西。如果一个mod可以将这个问题标记为重复的，那将不胜感激。

我更喜欢以编程方式显示对话框，而不是使用约定（href具有模态容器的ID）。 我就是这么做的：

$(".edit-object").click(function () {
     // sets modal's controls
     $("#txtDamageTypeName").val(damageType.Name); // damageType is a JS object
     // shows modal
     $('#mdlEdit').modal('show'); where mdlEdit is the ID of the modal container.
});

---

我希望有帮助。如果您有任何其他疑问，请告诉我。

要根据需要显示对话框，必须使用JavaScript（）

对HTML进行了一些更改，主要是为了通过CSS定位

jQuery代码使事物出现在它们应该出现的地方

CSS提供间距/颜色/等

HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<table class="table" id="table">
<thead>
    <tr>
        <th id="name">Teacher</th>
        <th id="courses">Courses</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><a data-toggle="modal" href="#myModal" id="s-1">Katherine Crowley</a></td>
        <td>English</td>
    </tr>
    <tr>
        <td><a data-toggle="modal" href="#myModal" id="s-2">Seraphine Hamilton</a></td>
        <td>History</td>
    </tr>
    </tbody>
</table>
<div class="modal" id="myModal">
    <div class="modal-header">
        <div class="header-left">
            <h4 class="modal-title" href="#name"></h4>
        </div>
        <div class="header-right">
            <button type="button" class="close_btn" data-dismiss="modal" aria-hidden="true">×</button>
        </div><!-- .header-right -->
    </div><!-- .modal-header -->
    <div class="container">
        <div class="modal-body">
            <div class="modal-body-inner"></div>
        </div><!-- .modal-body -->
        <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn close_btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div><!-- .modal-footer -->
    </div><!-- .container -->
</div><!-- #myModal -->
<div id="overlay"></div>

th, td{border:1px solid lightgrey;width:150px;text-align:center;}

#myModal{width:50%;height:50%;position:absolute;top:20%;left:25%;}
#myModal{background:wheat;z-index:10;display:none;}

.modal-header{width:100%;height:15%;background:grey;color:white;}
.header-left {width:90%;height:100%;float:left;}
.header-left h4{padding:0;margin:0;}
.header-right{width:10%;height:100%;float:right;}
.close {float:right;}

.container{width:100%;height:85%;}
.modal-body{width:90%;height:70%;}
.modal-body-inner{width:60%;height:60%;padding-top:20%;padding-left:20%;}
.modal-footer{width:90%;height:30%;padding-left:10%;border-top:1px solid lightgrey;}
.modal-footer a {padding:0 10px;margin-top:15px;}

#overlay{width:100%;height:100%;position:absolute;top:0;left:0;}
#overlay{background:black;opacity:0.8;z-index:5;display:none;}

$('document').ready(function() {
    $('[id^=s-]').click(function(){
        var name = $(this).text();
        var course = $(this).parent().next().text();
        $('.modal-title').html(name);
        $('.modal-body-inner').html(course);
        $('#overlay').show();
        $('#myModal').show();
    });
    $('.close_btn').click(function(){
        $('#overlay').hide();
        $('#myModal').hide();
    });

    $('.btn').button();
}); //END document.ready

jQuery/JavaScript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<table class="table" id="table">
<thead>
    <tr>
        <th id="name">Teacher</th>
        <th id="courses">Courses</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><a data-toggle="modal" href="#myModal" id="s-1">Katherine Crowley</a></td>
        <td>English</td>
    </tr>
    <tr>
        <td><a data-toggle="modal" href="#myModal" id="s-2">Seraphine Hamilton</a></td>
        <td>History</td>
    </tr>
    </tbody>
</table>
<div class="modal" id="myModal">
    <div class="modal-header">
        <div class="header-left">
            <h4 class="modal-title" href="#name"></h4>
        </div>
        <div class="header-right">
            <button type="button" class="close_btn" data-dismiss="modal" aria-hidden="true">×</button>
        </div><!-- .header-right -->
    </div><!-- .modal-header -->
    <div class="container">
        <div class="modal-body">
            <div class="modal-body-inner"></div>
        </div><!-- .modal-body -->
        <div class="modal-footer">
            <a href="#" data-dismiss="modal" class="btn close_btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div><!-- .modal-footer -->
    </div><!-- .container -->
</div><!-- #myModal -->
<div id="overlay"></div>

th, td{border:1px solid lightgrey;width:150px;text-align:center;}

#myModal{width:50%;height:50%;position:absolute;top:20%;left:25%;}
#myModal{background:wheat;z-index:10;display:none;}

.modal-header{width:100%;height:15%;background:grey;color:white;}
.header-left {width:90%;height:100%;float:left;}
.header-left h4{padding:0;margin:0;}
.header-right{width:10%;height:100%;float:right;}
.close {float:right;}

.container{width:100%;height:85%;}
.modal-body{width:90%;height:70%;}
.modal-body-inner{width:60%;height:60%;padding-top:20%;padding-left:20%;}
.modal-footer{width:90%;height:30%;padding-left:10%;border-top:1px solid lightgrey;}
.modal-footer a {padding:0 10px;margin-top:15px;}

#overlay{width:100%;height:100%;position:absolute;top:0;left:0;}
#overlay{background:black;opacity:0.8;z-index:5;display:none;}

$('document').ready(function() {
    $('[id^=s-]').click(function(){
        var name = $(this).text();
        var course = $(this).parent().next().text();
        $('.modal-title').html(name);
        $('.modal-body-inner').html(course);
        $('#overlay').show();
        $('#myModal').show();
    });
    $('.close_btn').click(function(){
        $('#overlay').hide();
        $('#myModal').hide();
    });

    $('.btn').button();
}); //END document.ready

---

注:

看起来好像有很多代码，但是同时打印原始HTML和修改后的HTML，差别就会立即显现出来。请记住，大多数差异都是出于CSS样式的目的，即在对话框中正确定位对象

jQueryUI仅用于快速设置按钮样式。但是，代码确实需要jQuery。不要理会那些坚持在jQuery之前必须学习js的js顽固分子。不是真的

“模式”对话框通过创建三个z索引来工作。除了#覆盖和#模态对话框之外，所有内容的默认z索引都为1。覆盖层位于该层之上，值为5。因此，当覆盖显示时，所有其他内容都在覆盖下，无法单击。最后，模态对话框位于覆盖的上方

此

$（'[id^=s-]'）

表示其id以

s-

开头的任何元素。请注意，ID不能以数字开头，前缀

s-

提供了选择锚定标记的方法。一旦进入单击事件，

$（this）

就是刚才单击的元素。所以，

$（this.attr（'id'）

是刚刚单击的元素的ID。您还可以通过拆分将数值部分分离出来，如下所示：

var num=$（this）.attr（'id'）.split（'-'）[1]

之所以包含最热门的文章re-JavaScript being dead，是因为它在解释什么是jQuery以及为什么jQuery（非常）有用方面做得很好。正如作者在一篇较新的博客文章中承认的那样，JavaScript并没有消亡

---

看看这个问题：你不能使用多个情态动词吗？只要给他们分配不同的ID。@Dan:谢谢！那很有效！如果你把这个链接作为一个解决方案发布，我可以批准它是正确的。不应该用另一个问题的链接来回答-也许一个mod可以将它标记为一个副本？@Dan我想那就必须这样做了。谢谢你的帮助。