Fatal编程技术网
  • javascript/
  • Javascript 在两个不同的模态体引导中加载相同的表

Javascript 在两个不同的模态体引导中加载相同的表

javascript jquery

Javascript 在两个不同的模态体引导中加载相同的表,javascript,jquery,Javascript,Jquery,实际上我有两个模态ID为myModal1，myModal和它们包含不同的表。当用户输入一些值时，将打开#myModal并显示其在MODALBODY中的表。当用户未输入一些值时，将显示#myModal1和另一个具有自己MODALBODY的表。当用户输入值或不输入值时，我需要显示相同的表 <!DOCTYPE html> <html> <head> <title></title> <link rel="sty

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


.桌子{
边界半径：5px；
宽度：100%；
保证金：0px自动；
浮动：无；
}
客户
&时代；
情态标题
基本表
名称
年龄
中央信息区
约翰纳利巴贝巴
雌鹿
john@example.com
玛丽
教育部
mary@example.com
七月
杜利
july@example.com
接近
&时代；
编辑
相对的
姓名：
年龄：
Cid:
搜寻
名称
年龄
中央信息区
乔纳阿
雌鹿
john@example.com
玛丽
教育部
mary@example.com
七月
杜利
july@example.com
接近
$（文档）.ready（函数（）{
$（'#go'）。单击（函数（）{
var test1=$（'#test'）.val（）；
如果（test1==“”）{
$（'myModal1'）.modal（'show'）；
$（“#表1”）.hide（）；
}
否则{
$（'myModal'）.modal（'show'）；
}
$（“#搜索”）。单击（函数（）{
$（“#表1”）.show（）；
});
});
});
如果您想使用真正“相同”的表，可以使用以下方法将其从一个模式移动到另一个模式：

<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>

if (test1 === "") {
    $('#table1').html($("#tableModel").html());
    $('#\\#myModal1').modal('show');
    $('#table1').hide();
} else {
    $('#relativeTable').html($("#tableModel").html());
    $('#\\#myModal').modal('show');
}
如果您只想复制表内容，请使用以下命令：

<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>

if (test1 === "") {
    $('#table1').html($("#tableModel").html());
    $('#\\#myModal1').modal('show');
    $('#table1').hide();
} else {
    $('#relativeTable').html($("#tableModel").html());
    $('#\\#myModal').modal('show');
}
据我所知，您需要在table1模式框中显示#relativeTable，因此需要使用
$（“.table responsive”）.clone（）.appendTo（#appendDiv”）并克隆该特定表，并在需要的位置显示我已在显示克隆表的位置添加了#appendDiv id




.桌子{
边界半径：5px；
宽度：100%；
保证金：0px自动；
浮动：无；
}
客户
&时代；
情态标题
基本表
名称
年龄
中央信息区
约翰纳利巴贝巴
雌鹿
john@example.com
玛丽
教育部
mary@example.com
七月
杜利
july@example.com
接近
&时代；
编辑
相对的
姓名：
年龄：
Cid:
搜寻
名称
年龄
中央信息区
乔纳阿
雌鹿
john@example.com
玛丽
教育部
mary@example.com
七月
杜利
july@example.com