JS左右选框(三)

这次是js结合jquery实现，需求也变了，左边是下拉选单，右边是table表格。

要求，左边选择，可以在右边表格中显示出来，右边表格可以删除。

SelectBox.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript" language="JavaScript">
	//添加
	$(function(){
		$("#add").click(function(){
			var html = "";
			if($("#selectRights option:selected").length > 0){//如果有選中
				//顯示列標題
				document.getElementById("headTitle").style.display = "";
					$("#selectRights option:selected").each(function(){
						html = "";
						html+="<tr class='table-odd-row' id='shihuangzhe'>"
					      	     +"<td class='table-other-column'><a href='javascript:void(0)' onclick='remove(this,\""+$(this).val()+"\",\""+$(this).text()+"\")'><img src='${ctx}/images/u78.png' width='16' height='16' border='0' alt='刪除'></a></td>"
					      	     +"<td class='table-string-column'>"+ $(this).text() +"</td>"
					      	     +"<td class='table-string-column'><input type='text' class='textbox_char_150' name='subWorkName'></td>"
					      	     +"<td class='table-string-column'><input type='text' class='textbox_char_150' name='subEstimate'></td>"
					      	     +"<td class='table-num-column'><select name='subWorkStatus'><option value='230001'>未完成</option><option value='230002'>已完成</option></select></td>"
					      	     +"<td class='table-string-column'><input type='text' class='textbox_char_150' name='subComment'></td>"
					      	     +"</tr>";	     
					   $("#tab1 tbody").append(html);  	     
					   $(this).remove();   	     
					})
			}
		})
	})
	//重置
	$(function(){
		$("#removeAll").click(function(){
			//清楚右邊table內容
			$("#tab1 tbody").empty();
			//隱藏列標題
			document.getElementById("headTitle").style.display = "none";
			var selN1 = document.getElementById("selectedRights");
			var selN2 = document.getElementById("selectRights");
			//先清空左邊的select下拉選單
			if(selN2.options.length > 0){
				for ( var j = selN2.options.length; j >= 0; j--) {
					selN2.remove(j);
				}
			}
			//將隱藏的右邊select下拉選單的值挪到左邊
			for ( var i = 0; i < selN1.options.length; i++) {
				var t = selN1.options[i].text;
				var v = selN1.options[i].value;
				selN2.options.add(new Option(t, v));
			}
		})
	})
	
	//刪除
	function remove(obj,value,key){
		var tr = obj.parentNode.parentNode;
		var tbody = tr.parentNode;
		tbody.removeChild(tr);
		//將移除的option添加到右邊
		$("#selectRights").append("<option value='"+value+"'>"+key+"</option>");
		if(document.getElementById("shihuangzhe") == null || document.getElementById("shihuangzhe") == 'undefined'){
			//隱藏列標題
			document.getElementById("headTitle").style.display = "none";
		}
	}
</script>
<table class="tablestyle" cellspacing="0" cellpadding="0">
	<tr class="tdstyle2">
		<td width="220">
			<table width="200" border="0" cellpadding="1" cellspacing="1" >				
				<tr>
					<td align="center" width="200" bgcolor="#FFFFFF">
						<select id="selectRights" size="8" multiple="multiple" style="width:200px ">							
							<c:forEach items="${selectRoleList }" var="option">
								<option value="${option.value }" >${option.name }</option>
							</c:forEach>
						</select>
					</td>
				</tr>
			</table>
		</td>
		<td width="25" align="center">
			<input style="width: 50px" name="sure2" type="button" id="add" value=">">
			<input style="width: 50px" name="sure3" type="button" id="removeAll" value="重置">
		</td>
		<td valign="top">
				<table  id="tab1" cellspacing="2" cellpadding="1" class="tablestyle1">
					<thead id="headTitle" style="display: none;">
						<tr>
							<th class="headers" scope="col">處理</th>
							<th class="headers" scope="col">用戶名</th>
							<th class="headers" scope="col">子任務名</th>
							<th class="headers" scope="col">預估</th>
							<th class="headers" scope="col">任務狀態</th>
							<th class="headers" scope="col">附注</th>
						</tr>
					</thead>
					<tbody>
					</tbody>							
				</table>
				<select id="selectedRights" size="8" multiple="multiple" style="width:200px;display: none;">							
					<c:forEach items="${selectRoleList }" var="option">
						<option value="${option.value }" >${option.name }</option>
					</c:forEach>
				</select>
		</td>
	</tr>
</table>

画面类似于下面的：

左边选择后，则加入到右边的动态table中。