在两个不同的MODAL BODY引导程序中加载相同的表

时间：2018-03-28 10:51:13

标签： javascript jquery

实际上我有两个带有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>

2 个答案:

答案 0 :(得分：1)

如果你想使用真正“相同”的表格，可以使用JQuery append()将其从模态转移到另一个模式，如下所示：

<table class="table" id="tableModel">
    ... table contents
</table>


<div class="modal fade" id="#myModal">
 ....
   <div id="holder-table">
       .... here goes the table
   </div>

<div class="modal fade" id="#myModal1">
 ....
   <div id="holder-table1">
      .... here goes the table
   </div>

然后使用append在DOM中移动表格，在模态之间：

if (test1 === "") {
    $('#holder-table1').append($("#tableModel"))
    $('#\\#myModal1').modal('show');
    $('#table1').hide();
} else {
    $('#holder-table').append($("#tableModel"))
    $('#\\#myModal').modal('show');
}

如果您只想复制表格内容，请使用JQuery html()，如下所示：

if (test1 === "") {
    $('#table1').html($("#tableModel").html());
    $('#\\#myModal1').modal('show');
    $('#table1').hide();
} else {
    $('#relativeTable').html($("#tableModel").html());
    $('#\\#myModal').modal('show');
}

答案 1 :(得分：1)

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

＆＃13;
＆＃13; 
            <!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题