首先引入需要的js、css
1 <!-- 样式控制 --> 2 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
3 <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>
HTML代码：
1 <div class="container-fluid"> 2 <form id="form-article-add" method="" action="" class="form-inline"> 3 <div class="form-group form-group-sm"> 4 <label for="notice">请选择查询表格</label> 5 <select id="notice" name="notice" class="form-control"> 6 <option value="">--请选择--</option> 7 <option value="1">表格1</option> 8 <option value="2">表格2</option> 9 <option value="3">表格3</option> 10 <option value="4">表格4</option> 11 <option value="5">表格5</option> 12 </select> 13 </div> 14 <div class="m-top"> 15 <button type="submit" class="btn btn-primary btn-sm"> 16 <i class="glyphicon glyphicon-search"></i> <span>查询</span> 17 </button> 18 <button type="button" class="btn btn-success btn-sm" onclick="formReset()"> 19 <i class="glyphicon glyphicon-refresh"></i> <span>重置</span> 20 </button> 21 </div> 22 </form> 23 <div class="panel panel-default m-top"> 24 <div class="panel-body"> 25 <a class="btn btn-info btn-sm" href="" title="添加"> 26 <i class="glyphicon glyphicon-plus-sign"></i> 添加 27 </a> 28 <span class="pull-right"> 29 <a href="#" class="btn btn-info btn-sm" title="修改"> 30 <i class="glyphicon glyphicon-edit"></i> 修改 31 </a> 32 <a href="" class="btn btn-danger btn-sm" title="删除" > 33 <i class="glyphicon glyphicon-trash"></i> 删除 34 </a> 35 </span> 36 </div> 37 </div> 38 <div class="table-responsive"> 39 <!-- 表格1 --> 40 <table class="table table-bordered table-striped table-hover table-condensed text-center" style="white-space: nowrap;" id="TAB1"> 41 <thead> 42 <tr class="success"> 43 <th class="text-center"><input type="checkbox" class="checkboxCtrl"></th> 44 <th class="text-center">ID1</th> 45 <th class="text-center">uu</th> 46 <th class="text-center">柔柔弱弱</th> 47 <th class="text-center">同一天</th> 48 </tr> 49 </thead> 50 <tbody> 51 <c:forEach var="item" items="${page.result}" varStatus="s"> 52 <tr target="slt_objId" rel="${item.id}"> 53 <td><input name="orderIndexs" value="${item.id }" type="checkbox"></td> 54 <td>nnelName</td> 55 <td>nnel</td> 56 <td>innelName</td> 57 <td>channe</td> 58 </tr> 59 </c:forEach> 60 </tbody> 61 </table> 62 <!-- 表格2 --> 63 <table class="table table-bordered table-striped table-hover table-condensed text-center hideing" style="white-space: nowrap;" id="TAB2"> 64 <thead> 65 <tr class="success"> 66 <th class="text-center"><input type="checkbox" class="checkboxCtrl"></th> 67 <th class="text-center">ID2</th> 68 <th class="text-center">第三方改的</th> 69 <th class="text-center">单的人</th> 70 <th class="text-center">滚滚滚</th> 71 </tr> 72 </thead> 73 <tbody> 74 <c:forEach var="item" items="${page.result}" varStatus="s"> 75 <tr target="slt_objId" rel="${item.id}"> 76 <td><input name="orderIndexs4" value="${item.id }" type="checkbox"></td> 77 <td>annelName</td> 78 <td>itnnel</td> 79 <td>itame</td> 80 <td>teme</td> 81 </tr> 82 </c:forEach> 83 </tbody> 84 </table> 85 <!-- 表格3 --> 86 <table class="table table-bordered table-striped table-hover table-condensed text-center hideing" style="white-space: nowrap;" id="TAB3"> 87 <thead> 88 <tr class="success"> 89 <th class="text-center"><input type="checkbox" class="checkboxCtrl"></th> 90 <th class="text-center">ID3</th> 91 <th class="text-center">渠道</th> 92 <th class="text-center">单大</th> 93 <th class="text-center">每日</th> 94 </tr> 95 </thead> 96 <tbody> 97 <c:forEach var="item" items="${page.result}" varStatus="s"> 98 <tr target="slt_objId" rel="${item.id}"> 99 <td><input name="orderIndexs1" value="${item.id }" type="checkbox"></td> 100 <td>nnelName</td> 101 <td>iteannel</td> 102 <td>annelName</td> 103 <td>itemnne</td> 104 </tr> 105 </c:forEach> 106 </tbody> 107 </table> 108 <!-- 表格4 --> 109 <table class="table table-bordered table-striped table-hover table-condensed text-center hideing" style="white-space: nowrap;" id="TAB4"> 110 <thead> 111 <tr class="success"> 112 <th class="text-center"><input type="checkbox" class="checkboxCtrl"></th> 113 <th class="text-center">ID4</th> 114 <th class="text-center">道名</th> 115 <th class="text-center">最大</th> 116 <th class="text-center">每大限</th> 117 </tr> 118 </thead> 119 <tbody> 120 <c:forEach var="item" items="${page.result}" varStatus="s"> 121 <tr target="slt_objId" rel="${item.id}"> 122 <td><input name="orderIndexs2" value="${item.id }" type="checkbox"></td> 123 <td>innelName</td> 124 <td>iteannel</td> 125 <td>iteelName</td> 126 <td>itenne</td> 127 </tr> 128 </c:forEach> 129 </tbody> 130 </table> 131 <!-- 表格5 --> 132 <table class="table table-bordered table-striped table-hover table-condensed text-center hide" style="white-space: nowrap;" id="TAB5"> 133 <thead> 134 <tr class="success"> 135 <th class="text-center"><input type="checkbox" class="checkboxCtrl"></th> 136 <th class="text-center">ID5</th> 137 <th class="text-center">名称</th> 138 <th class="text-center">最大</th> 139 <th class="text-center">每填</th> 140 </tr> 141 </thead> 142 <tbody> 143 <c:forEach var="item" items="${page.result}" varStatus="s"> 144 <tr target="slt_objId" rel="${item.id}"> 145 <td><input name="orderIndexs3" value="${item.id }" type="checkbox"></td> 146 <td>iannelName</td> 147 <td>inel</td> 148 <td>iteame</td> 149 <td>hanne</td> 150 </tr> 151 </c:forEach> 152 </tbody> 153 </table> 154 </div> 155 </div>
css样式：
1 .m_bottom { 2 margin-bottom: 10px; 3 } 4 5 .m-top { 6 margin-top: 20px; 7 } 8 9 .form-inline .form-group { 10 margin-top: 5px; 11 margin-bottom: 5px; 12 } 13 .showing{ 14 display: table!important; 15 }
js核心代码：
1 // 根据条件决定表格显示内容 2 var notice=$('#notice').val(); 3 $('.table-responsive').children('table').hide(); 4 $('#notice').change(function(){ 5 notice = $('#notice').val(); 6 alert(notice) 7 switch (notice) { 8 case "1": 9 $('.table-responsive #TAB1').addClass('showing').siblings().removeClass('showing'); 11 break; 12 case "2": 13 $('.table-responsive #TAB2').addClass('showing').siblings().removeClass('showing'); 15 break; 16 case "3": 17 $('.table-responsive #TAB3').addClass('showing').siblings().removeClass('showing'); 18 break; 20 case "4": 21 $('.table-responsive #TAB4').addClass('showing').siblings().removeClass('showing'); 22 break; 24 case "5": 25 $('.table-responsive #TAB5').addClass('showing').siblings().removeClass('showing'); 26 break; 28 } 29 }); 30 31 /** 32 * 清空表单内容 33 * form-article-add： 为需要清空的form表单的id 34 */ 35 function formReset() { 36 $(':input', '#form-article-add') 37 .not(':button, :submit, :reset, :hidden,:radio') // 去除不需要重置的input类型 38 .val('') 39 .removeAttr('checked') 40 .removeAttr('selected'); 41 }
完！