動態生成矩陣選擇器，選擇面板

根據數據庫中的數據量的大小動態生成矩陣佈局的選擇器，我稱之爲“選擇面板”，在網絡上查了很多資料，但是沒有一個是符合我的要求的。終於在同伴們和自己的參悟下，把佈局給設計出來，後來奮力學習JQuery的腳本使用，才最後修成正果！
以下是具體的實現代碼：
1.js腳本：

<script type="text/javascript">
	$(document).ready(function(){
		//1.當選擇文本框的文本內容改變的時候觸發的事件
		$("#culture").change(function(){
			var $time1 = $("#ol-reg-il-beginTime").val();
			var $time2 = $("#ol-reg-il-endTime").val();
			var $endDate = $("#culture").val();
			window.location.href="/box/boxPrice?t1="+$time1+"&t2="+$time2+"&nDate="+$endDate;
		});
		//2.當點擊查詢價格按鈕觸發
		$("#showPricesAnalysis").click(function(){
			var $checkboxs = $("input[type=checkbox]:checked");
			 var date = $("#culture").val();
			var tables = "";
			var length;
			 $checkboxs.each(function(index,domEle){
				 //獲取多個選中的值，傳遞到後臺查詢，並轉發到另一個頁面
				 tables=tables+domEle.value+",";
			 });
			 length=$checkboxs.length;
			 $("#data").attr("value",tables);
			 $("#execDate").attr("value",date);
		});
		
		// 行列選擇事件
		$("a[id^='0_']").bind("click",function(){
			var $checkboxs = $("input[name=items]");
			var id = $(this).attr("id");
			var arra = id.split("_");
			var se = arra[1];
			$("input[name='items'][id$='_"+se+"']").attr("checked","checked");
			var $colSel = $("input[name='items'][id$='_"+se+"']");
			$(this).bind("click",function(){
				if($colSel.attr("checked")){
					$colSel.removeAttr("checked");
				}else{
					$colSel.attr("checked","checked");
				}
			});
		});
		
		$("a[id$='_0']").bind("click",function(){
			var $checkboxs = $("input[name=items]");
			var id = $(this).attr("id");
			var arra = id.split("_");
			var se = arra[0];
			$("input[name='items'][id^='"+se+"_']").attr("checked","checked"); 
			var $rowSel = $("input[name='items'][id^='"+se+"_']");
			$(this).bind("click",function(){
				if($rowSel.attr("checked")){
					$rowSel.removeAttr("checked");
				}else{
					$rowSel.attr("checked","checked");
				}
			});
		});
		//全選和取消全選事件
		 $("a[id='0_0']").bind("click",function(){
			 var $checkboxs = $("input[name=items]");
			 $checkboxs.attr("checked","checked");
			 $(this).bind("click",function(){
				 if($checkboxs.attr("checked")){
					 $checkboxs.removeAttr("checked");
				 }else{
					 $checkboxs.attr("checked","checked");
				 }
			 });
		 });
	});
	
</script>

2.html面板選擇器代碼：

說明一下（kList是從數據庫中動態讀取的數據，類型是List<String>  , 但是因爲才每次動態讀取之前，我都先往kList列表中加入了一個String "All" 爲了佔位的。）

<form action="/box/boxChart" method="post" id="form1">
			<input type="hidden" id="data" name="data">
			<input type="hidden" id="execDate" name="execDate">
			<!-- 1.頂部時間 -->
			<div id="timediv">
			
			請選擇執行表:
				<select name="culture" id="culture" style="width:98px">
					<c:forEach var="table" varStatus="i" items="${tableList}">
							<c:if test="${selectDate==table}">
								<option value="${selectDate}" selected = "selected">${selectDate}</option>
							</c:if>
							<c:if test="${selectDate!=table}">
								<option value="${table}">${table}</option>
							</c:if>
							
					</c:forEach>
				</select>
				<input type="submit" id="showPricesAnalysis" value="查詢價格" />
			</div>
			<hr>
			<div id="space" style="width:100%;height:10px;"></div>
			
			<!--2.panel選擇器 -->
			<div id="paneldiv" style="width:100%; height:100%;">
				<table border="1px" cellpadding="5" cellspacing="0" id="bigtable">
					<c:forEach var="item" varStatus="status" items="${kList}" >
						<tr>
							<c:forEach var="k"  varStatus="sta" items="${kList}" >
								<c:if test="${sta.getIndex()<1 or status.getIndex()<1}"><!-- 如果是第一行或者是第一列-->
		                             <span style="white-space:pre">				</span><c:if test="${sta.getIndex()>=status.getIndex()}"><!-- 第一行n列，不重複列舉-->
		                             	<span style="white-space:pre">			</span>  <td align="center"><a id="${status.getIndex()}_${sta.getIndex()}">${k}</a></td>
									 </c:if>
									 <c:if test="${sta.getIndex()<status.getIndex()}"><!-- 第一列n行，不重複列舉-->
		                             	<span style="white-space:pre">			</span>   <td align="center"><a id="${status.getIndex()}_${sta.getIndex()}">${item}</a></td>
									 </c:if>
								</c:if>
								<c:if test="${sta.getIndex()>=1 and status.getIndex()>=1}"><!-- n行n列，重複列舉*號-->
									<c:if test="${sta.getIndex()!= status.getIndex()}">
			                           <span style="white-space:pre">				</span><td align="center"><input type="checkbox" name="items" id="${status.getIndex()}_${sta.getIndex()}" value="${selectDate}_${item}_${k}" /></td>
									</c:if>
									<c:if test="${sta.getIndex()== status.getIndex()}">
			                           <span style="white-space:pre">				</span><td align="center">x</td>
									</c:if>
								</c:if>
							</c:forEach>
						</tr>
					</c:forEach>
				</table>  
			</div>
</form>	

3.效果如圖：