个人中心
gpt4 book ai didi

javascript - 在两个不同的 MODAL BODY Bootstrap 中加载同一个表

转载 作者：行者123 更新时间：2023-11-30 14:41:44 27 4
gpt4 key购买 nike

实际上我有两个 ID 为 myModal1、myModal 的模态，它们包含不同的表。当用户输入一些值时，#myModal 将打开并显示其在 MODALBODY 中的表。当用户未输入某些值时，#myModal1 将显示为另一个有自己的 MODALBODY 的表。当用户输入或不输入值时，我需要显示同一张表。 

      <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="global.css">
    <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.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style type="text/css">
    .table {
    border-radius: 5px;
    width: 100%;
    margin: 0px auto;
    float: none;
}
</style>
</head>
<body>

<form class="form-inline" action="">    
<div class="form-group">
  <label for="test" class="col-sm-3 control-label">ClientId</label>

    <input type="text" class="form-control" id="test" placeholder="Enter A Value">

</div>
<div class="form-group">

    <button type="button" id="go"  class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span></button>

</div>
</form>
<!--Modal if input is empty-->
<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">Modal title</h4>

      </div>
      <div class="modal-body">
        <!--div class="container"-->
  <h2>Basic Table</h2>

  <div class="table-responsive">       
  <table id="relativeTable" class="table table-hover table-striped table-condensed">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>CID</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>JohnALIBABBABABABA</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

<!--/div-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!--modal if there is some text-->
<!--Modal-->

<div class="modal fade" id="#myModal1">
  <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>
        <h3 class="modal-title modal-title-or">
            Edit
            Relative
            </h3>

      </div>
      <form id="relativeFormEdit" class="form-horizontal">
      <div class="modal-body">
        <!--form body-->
        <div class="form-group ">
      <div class="row">
                        <label class="control-label col-md-4">Name:</label>
                        <div class="col-md-6">
                            <input name="name" title="Name" class="form-control">
                        </div>
                    </div>
       <div class="row">
                        <label class="control-label col-md-4">Age:</label>
                        <div class="col-md-6">
                            <input name="age" title="age" class="form-control">
                        </div>
                    </div>

      <div class="row">
                        <label class="control-label col-md-4">Cid:</label>
                        <div class="col-md-6">
                            <input name="cid" title="cid" class="form-control">
                        </div>
                    </div>
             <div class="col-md-10">    
                 <button type="button" class="btn btn-info btn pull-right" id="search" >
      <span class="glyphicon glyphicon-search"></span>Search
    </button>
                    </div>

<div>
    <table class="table" id="table1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>CID</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>JohnAAAAA</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
    </div>
</div>
</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
</form>
<script>

$(document).ready(function(){
$('#go').click(function() {
    var test1 = $('#test').val();
  if (test1 === "") {
    $('#\\#myModal1').modal('show');
    $('#table1').hide();
  }
  else{
    $('#\\#myModal').modal('show');
  }
$('#search').click(function() {
        $("#table1").show();
    });
});
});
</script>
<!-- /.modal -->
<!--End Modal-->
</body>
</html>

最佳答案

据我了解，您需要在 table1 模式框中显示 #relativeTable 表，因此您需要使用 $( ".table-responsive").clone().appendTo( "#appendDiv"); 并克隆那个特定的表并在你需要的地方显示我在我显示克隆表的地方添加了#appendDiv id 

            <!DOCTYPE html>
            <html>
            <head>
                <title></title>
                <link rel="stylesheet" type="text/css" href="global.css">
                <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.2/css/bootstrap.min.css" rel="stylesheet" />
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
            <style type="text/css">
                .table {
                border-radius: 5px;
                width: 100%;
                margin: 0px auto;
                float: none;
            }
            </style>
            </head>
            <body>

            <form class="form-inline" action="">    
            <div class="form-group">
              <label for="test" class="col-sm-3 control-label">ClientId</label>

                <input type="text" class="form-control" id="test" placeholder="Enter A Value">

            </div>
            <div class="form-group">

                <button type="button" id="go"  class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span></button>

            </div>
            </form>
            <!--Modal if input is empty-->
            <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">Modal title</h4>

                  </div>
                  <div class="modal-body">
                    <!--div class="container"-->
              <h2>Basic Table</h2>

              <div class="table-responsive">       
              <table id="relativeTable" class="table table-hover table-striped table-condensed">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>CID</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>JohnALIBABBABABABA</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                  </tr>
                  <tr>
                    <td>Mary</td>
                    <td>Moe</td>
                    <td>mary@example.com</td>
                  </tr>
                  <tr>
                    <td>July</td>
                    <td>Dooley</td>
                    <td>july@example.com</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!--/div-->
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
                <!-- /.modal-content -->
              </div>
              <!-- /.modal-dialog -->
            </div>

            <!--modal if there is some text-->
            <!--Modal-->

            <div class="modal fade" id="#myModal1">
              <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>
                    <h3 class="modal-title modal-title-or">
                        Edit
                        Relative
                        </h3>

                  </div>
                  <form id="relativeFormEdit" class="form-horizontal">
                  <div class="modal-body">
                    <!--form body-->
                    <div class="form-group ">
                  <div class="row">
                                    <label class="control-label col-md-4">Name:</label>
                                    <div class="col-md-6">
                                        <input name="name" title="Name" class="form-control">
                                    </div>
                                </div>
                   <div class="row">
                                    <label class="control-label col-md-4">Age:</label>
                                    <div class="col-md-6">
                                        <input name="age" title="age" class="form-control">
                                    </div>
                                </div>

                  <div class="row">
                                    <label class="control-label col-md-4">Cid:</label>
                                    <div class="col-md-6">
                                        <input name="cid" title="cid" class="form-control">
                                    </div>
                                </div>
                         <div class="col-md-10">    
                             <button type="button" class="btn btn-info btn pull-right" id="search" >
                  <span class="glyphicon glyphicon-search"></span>Search
                </button>
                                </div>
            <div id="appendDiv"></div>
            <div>
                <table class="table" id="table1">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>CID</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>JohnAAAAA</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                  </tr>
                  <tr>
                    <td>Mary</td>
                    <td>Moe</td>
                    <td>mary@example.com</td>
                  </tr>
                  <tr>
                    <td>July</td>
                    <td>Dooley</td>
                    <td>july@example.com</td>
                  </tr>
                </tbody>
              </table>
                </div>
            </div>
            </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
                <!-- /.modal-content -->
              </div>
              <!-- /.modal-dialog -->
            </div>
            </form>
            <script>

            $(document).ready(function(){
            $('#go').click(function() {
                var test1 = $('#test').val();
              if (test1 === "") {
                $('#\\#myModal1').modal('show');
                $('#table1').hide();
                $( ".table-responsive" ).clone().appendTo( "#appendDiv" );
              }
              else{
                $('#\\#myModal').modal('show');
                 $("#table1").show();
              }
            });
            $("#search").click(function(){
            $("#table1").show();
            })
            });
            </script>
            <!-- /.modal -->
            <!--End Modal-->
            </body>
            </html>

关于javascript - 在两个不同的 MODAL BODY Bootstrap 中加载同一个表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49532563/

27 4 0
文章推荐： javascript - vue.js/javascript新建对象onclick，其中一个值为你点击的列表项的值
文章推荐： javascript - 第一张图片显示弹出窗口，而不是其他图片
文章推荐： javascript - 流: How to declare that a type implements an interface?
文章推荐： Javascript 异步函数和 promise
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com