Javascript 具有多个模态的多选项卡页面（引导）_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 具有多个模态的多选项卡页面（引导）

javascript jquery html css twitter-bootstrap

Javascript 具有多个模态的多选项卡页面（引导）,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我正在尝试创建一个包含多个选项卡的页面。在每个选项卡中，都有一个表，每行上都有一个按钮，用于打开一个模式。只要我的选项卡中只有一个具有模态，我的代码就可以正常工作。但是，一旦我有2个或更多带有modals的选项卡，两个选项卡的内容将显示在一个页面上，而不是被分成单独的选项卡这是我的密码：编辑-profile.ejs： <ul class="nav nav-tabs tabs-left"> <li class="active"><a href="#e

我正在尝试创建一个包含多个选项卡的页面。在每个选项卡中，都有一个表，每行上都有一个按钮，用于打开一个模式。只要我的选项卡中只有一个具有模态，我的代码就可以正常工作。但是，一旦我有2个或更多带有modals的选项卡，两个选项卡的内容将显示在一个页面上，而不是被分成单独的选项卡

这是我的密码：

编辑-profile.ejs：

  <ul class="nav nav-tabs tabs-left">
     <li class="active"><a href="#edit1" data-toggle="tab">Edit 1</a></li>
     <li><a href="#edit2" data-toggle="tab">Edit 2</a></li>
  </ul>

 <!-- Tab content -->
 <div class="col-xs-9">
                  <!-- Tab panes -->
                  <div class="tab-content">
                    <div class="tab-pane active" id="edit1">
                      <div id="edit1">
                        <% include ./partials/edit-profile/_edit1%>
                      </div>
                    </div>
                    <div class="tab-pane" id="edit2">
                      <div id="edit2">
                        <% include ./partials/edit-profile/_edit2%>
                      </div>
                    </div>
   <center><button type="submit" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Submit</button></center>





提交

在my_edit1.ejs partial中，我有：

<table id="edit1-table" class="table table-striped table-bordered order-table dt-responsive">
  <thead>
    <tr>
      <th>User ID</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 1</td>
      <td>user1@test.com</td>
      <td>Address1</td>
    </tr>

    <tr>
      <td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 2</td>
      <td>user2@test.com</td>
      <td>Address2</td>
    </tr>
  </tbody>
</table>

<!-- Modal -->
  <div id="edit1-modal" 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"> Edit 1 </h4>
        </div>
        <div class="modal-body">
            <% include ./_edit1-form %>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default pull-left">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>


用户ID
电子邮件
地址
用户1
user1@test.com
地址1
用户2
user2@test.com
地址2
&时代；
编辑1
提交
接近


$（文档）.ready（函数（）{
$（'edit1 table'）.DataTable（）；
} );

在_edit2.ejs中，我有类似的内容：

<table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive">
  <thead>
    <tr>
      <th>User ID</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td>
      <td>user1@test.com</td>
      <td>Address1</td>
    </tr>

    <tr>
      <td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span>User 2</td>
      <td>user2@test.com</td>
      <td>Address2</td>
    </tr>
  </tbody>
</table>

<!-- Modal -->
  <div id="edit2-modal" 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"> Edit 2 </h4>
        </div>
        <div class="modal-body">
            <% include ./_edit2-form %>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default pull-left">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>


用户ID
电子邮件
地址
用户1
user1@test.com
地址1
用户2
user2@test.com
地址2
&时代；
编辑2
提交
接近


$（文档）.ready（函数（）{
$（'#edit2 table'）.DataTable（）；
} );

有人能帮我弄清楚为什么我的表显示在同一页上，而两个选项卡都有情态动词吗？情态动词有不同的ID。

在这里，它起作用了


引导盒




用户ID
电子邮件
地址
用户1
user1@test.com
地址1
用户2
user2@test.com
地址2
&时代；
编辑1
提交
接近
用户ID
电子邮件
地址
用户1
user1@test.com
地址1
微软
用户2
user2@test.com
地址2
&时代；
编辑2
提交
接近
提交

在这里，它正在工作


引导盒




用户ID
电子邮件
地址
用户1
user1@test.com
地址1
用户2
user2@test.com
地址2
&时代；
编辑1
提交
接近
用户ID
电子邮件
地址
用户1
user1@test.com
地址1
微软
用户2
user2@test.com
地址2
&时代；
编辑2
提交
接近
提交

你有

标签吗？是的，我的edit-profile.ejs文件中有这个标签：
那么问题可能出在引导css和js jQuery中。检查这个例子，它包含了正确的文件：我包含了所有必要的文件，我只是从这个例子中省略了它们以保持简短。选项卡工作得非常好，modals和/或dataTables就是破坏代码的那些。所以现在选项卡工作了！模态和表格有什么问题吗？你有标签吗？是的，我的edit-profile.ejs文件中有这个：
那么问题可能在引导css和js jQuery中。检查这个例子，它包含了正确的文件：我包含了所有必要的文件，我只是从这个例子中省略了它们以保持简短。选项卡工作得非常好，modals和/或dataTables就是破坏代码的那些。所以现在选项卡工作了！modals和table有什么问题吗？您的答案只使用常规的html表，而不是javascript插件dataTable。很抱歉，我之前没有说得更具体。我不熟悉这个插件，但我不知道问题出在哪里。您的问题是关于选项卡不工作，在这个代码片段中，它工作得很好，因此添加插件只是添加css和js链接的问题。如果您对dataTable有问题，那么这是另一个问题。您的答案只使用常规html表，而不是Java
<table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive">
  <thead>
    <tr>
      <th>User ID</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td>
      <td>user1@test.com</td>
      <td>Address1</td>
    </tr>

    <tr>
      <td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span>User 2</td>
      <td>user2@test.com</td>
      <td>Address2</td>
    </tr>
  </tbody>
</table>

<!-- Modal -->
  <div id="edit2-modal" 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"> Edit 2 </h4>
        </div>
        <div class="modal-body">
            <% include ./_edit2-form %>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default pull-left">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

<script type="text/javascript">
$(document).ready(function() {
$('#edit2-table').DataTable();
} );
</script>