表單複選框選擇刪除

 

在JavaWeb項目中，常常有一些表格的分頁顯示，而我們有需要使用複選框選擇刪除的功能。

首先表格的顯示。

<span style="font-size:14px;"><table cellspacing="0" cellpadding="0" class="TableStyle">
       
        <!-- 表頭-->
        <thead>
            <tr align=center valign=middle id=TableTitle>
                <td width="30px"> </td>
                <td width="70px">操作</td>
				<td width="100px">添加時間</td>
            	<td width="80px">狀態</td>
                <td width="80px">來文單位</td>
                <td width="150px">來文標題</td>
				<td width="150px">來文文號</td>
				<td width="150px">標題</td>
                <td width="100px">收文文號</td>
            </tr>
        </thead>

		<!--顯示數據列表-->
        <tbody id="TableData" class="dataContainer" datakey="processDefList">
        	<c:forEach items="${list}" var="d">
				<tr align=center class="TableDetail1 template">
	                <td><input type="checkbox" value="${d.id}"></td>
	                <td>
	                	<c:if test="${not empty d.docTempExp.id}">
	                    	<a href="showDocTempExp/${d.docTempExp.id}">查看錶單</a>
	                    </c:if>
	                </td>
					<td>${d.createDate}</td>
					<td>${d.docStateString}</td>
	                <td>${d.princOrgan}</td>
	                <td>${d.princTitle}</td>
					<td>${d.releaseNo}</td>
	                <td>${d.title}</td>
	                <td>${d.docNo}</td>
				</tr>
			</c:forEach>
        </tbody>
</table></span>

然後是js代碼的編寫

<span style="font-size:14px;"><script type="text/javascript" src="js/jquery.min.js" ></script>
	<script type="text/javascript">
		function del(){
			if(confirm("確定要刪除嗎？")){
				var cs=$('input[type="checkbox"]:checked');
				for(var i=0, len=cs.length; i<len; i++ ){
					alert($(cs[i]).val());
					$.getJSON("removeReceive",{"id":$(cs[i]).val()},function(data){
						data.result? window.alert("刪除成功!") : window.alert("刪除失敗!");
					});
				}	
				cs.parent().parent().remove();
			}
		}
	</script></span>