Question

我是jquery的初学者，我有一个表，其中包含一个列，例如没有员工（部门中的员工总数）当用户点击它时，它应该在点击特定(like EmpA,EmpB,EmpC)时显示jquery模式employee (EmpA)中的员工列表应该显示详细信息那个EmpA。

Answer 1

你有一个很大的问题。这不仅仅是一个问题，而是一个应用程序。我可以帮助你开始向你展示如何（a）使用模态，（b）打开/关闭模态，以及（c）将东西粘贴到模态中。之后，您必须先尝试/使用它，然后才能提出其他问题。够公平吗？

对于模态，您有三种选择：

（1）您可以编写自己的模态。不是很困难，但如果您已经在使用包含模态的其他系统，则应该使用它。

（2）您可以使用jQueryUI - 但这与jQuery不同。它是jQuery的增强/附加组件，与Bootstrap相同。 jQueryUI包含一个模态对话框 - 但Bootstrap也是如此。

（3）由于你已经在使用Bootstrap，并且由于Bootstrap包含一个很酷的模态系统，你可以 - 而且应该 - 使用Bootstrap模态系统。这很容易。

Here is a link了解Bootstrap模态系统的工作原理。

在您的情况下，您可能希望使用the jQuery/javascript method of opening/closing the modal.这允许您以编程方式决定何时打开模态。

您还需要使用新数据填充模态。请注意，Bootstrap模式基本上如下所示：

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div>This is the body of the modal. This is where your data goes (HTML table, values, etc).</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

注意名为modal-body的类。如果使用jQuery .html()方法在其中注入新的HTML代码，则可以更改模态对话框中的内容。

$('#mybutt').click(function(){
    var newstuff = '\
      <div id="newstuff">\
        <img src="http://placekitten.com/400/150" /><br>\
        <h1>This is an example</h1>\
        <h3>Of some new stuff in the modal</h3>\
        <button id="nutherbutt">Click me next</button>\
      </div>\
    ';
    $('.modal-body').html(newstuff);  
});

$(document).on('click', '#nutherbutt', function(){
  //You must use .on() to trap events for injected tags
  alert('you clicked me');
  $('#myModal').modal('hide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>



<!-- - - - - -  Modal  - - - - - -  -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
        <button id="mybutt">Click Me!</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Answer 2

确保包含所有库; jquery，bootstrap.css，bootstrap.js

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

<!-- trigger modal -->
<td>
  Total
</td>
<td>
  <a href=""  data-toggle="modal" data-target="#myModal">4 emplyees</a>
</td>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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" id="myModalLabel">List of emplyees</h4>
      </div>
      <div class="modal-body">
        <ul>
           <li>Emp 1</li>
           <li>Emp 2</li>
           <li>Emp 3</li>
           <li>Emp 4</li>
        </ul>
      </div>
     
    </div>
  </div>
</div>

＆＃13;

单击表格单元格创建jquery模式

2 个答案: