一个简单的jQuery例子，动态添加表格和删除
生活随笔
收集整理的這篇文章主要介紹了
一个简单的jQuery例子，动态添加表格和删除
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果如圖：
詳細(xì)代碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>title</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><script type="text/javascript" src="jquery-1.11.1.js"></script><script type="text/javascript">$(document).ready( function(){$("#addBtn").click(function(){//獲取表單內(nèi)容var id =($(":text[name=id]").val());var username =($(":text[name=userName]").val());var age =($(":text[name=age]").val());var address =($(":text[name=c]").val());var password =($(":password").val());//在id：delAllID之后追加內(nèi)容//外部插入//$("#add").after("<tr ><td><input type='checkbox'/></td><td><span>'+id+'</span></td><td><span>'+uername+'</span></td><td><span>'+password+'</span></td><td><span>'+age+'</span></td><td><span>'+address+'</span></td><td ><a href=’javascript:void(0)‘ id=’delete‘>刪除</a></td></tr>");var h1="<tr id='";var hi ="' class='afterAdd'><td><input id='check' type='checkbox' name='ck'/></td><td><span>"; //idvar h2="</span></td><td><span>"; //usernamevar h3="</span></td><td><span>"; //passwordvar h4="</span></td><td><span>"; //agevar h5="</span></td><td><span>"; //addressvar h6="</span></td><td ><a href=";var h8="javascript:void(0)";var h9=" οnclick='del(this)'>刪除</a></td></tr>";//在<tr id="add"/>標(biāo)簽之后，即外部插入以下內(nèi)容$("#add").after(h1+id+hi+id+h2+username+h3+password+h4+age+h5+address+h6+h8+h9);});$(":checkbox[name=allCheck]").click(function(){//方式一//獲取當(dāng)前標(biāo)簽是否選中的boolean值/* var status = this.checked;//獲取其他新增的復(fù)選框var checks = $(":checkbox[name=ck]");if(status){//添加屬性//prop：獲取在匹配的元素集中的第一個(gè)元素的屬性值//prop(參數(shù)一，參數(shù)二)：參數(shù)一：標(biāo)簽名；參數(shù)二，參數(shù)屬性checks.prop("checked",status); }else{checks.prop("checked",false);} *///方式二$(":checkbox[name=ck]").prop("checked",this.checked);});//刪除全部標(biāo)簽 $("#delAllID").click(function(){//獲取選中的復(fù)選框并通過(guò)爺爺來(lái)刪除整一行$(":checkbox[name=ck]:checked").parent().parent().remove();});});//刪除一個(gè)function del(obj){//方式一//獲取父節(jié)點(diǎn)//alert(obj.parentNode);//方式二//獲取該標(biāo)簽的父標(biāo)簽的父標(biāo)簽然后移除自身$(obj).parent().parent().remove();};</script></head><body><table border="1" width="600px"><tr><th>選擇</th><th>編號(hào)</th><th>用戶名</th><th>密碼</th><th>年齡</th><th>住址</th><th>操作</th></tr><tr id="add"><td><input id="allCheck" type="checkbox" name="allCheck" /></td><td colspan="6"><a href="javascript:void(0)" id="delAllID" >全部刪除</a></td></tr></table><hr/><form><table border="1" width="300px"><tr><td>編號(hào)</td><td><input type="text" name="id" value="1"/></td></tr><tr><td>用戶名</td><td><input type="text" name="userName" value="2"/></td></tr><tr><td>密碼</td><td><input type="password" name="userPass"/></td></tr><tr><td>年齡</td><td><input type="text" name="age"/></td></tr><tr><td>住址</td><td><input type="text" name="c"/></td></tr><tr><td colspan="2" align="center"><input type="button" value="添加" id="addBtn"/><input type="reset" value="重置"/></td></tr></table></form></body> </html>
詳細(xì)代碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>title</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><script type="text/javascript" src="jquery-1.11.1.js"></script><script type="text/javascript">$(document).ready( function(){$("#addBtn").click(function(){//獲取表單內(nèi)容var id =($(":text[name=id]").val());var username =($(":text[name=userName]").val());var age =($(":text[name=age]").val());var address =($(":text[name=c]").val());var password =($(":password").val());//在id：delAllID之后追加內(nèi)容//外部插入//$("#add").after("<tr ><td><input type='checkbox'/></td><td><span>'+id+'</span></td><td><span>'+uername+'</span></td><td><span>'+password+'</span></td><td><span>'+age+'</span></td><td><span>'+address+'</span></td><td ><a href=’javascript:void(0)‘ id=’delete‘>刪除</a></td></tr>");var h1="<tr id='";var hi ="' class='afterAdd'><td><input id='check' type='checkbox' name='ck'/></td><td><span>"; //idvar h2="</span></td><td><span>"; //usernamevar h3="</span></td><td><span>"; //passwordvar h4="</span></td><td><span>"; //agevar h5="</span></td><td><span>"; //addressvar h6="</span></td><td ><a href=";var h8="javascript:void(0)";var h9=" οnclick='del(this)'>刪除</a></td></tr>";//在<tr id="add"/>標(biāo)簽之后，即外部插入以下內(nèi)容$("#add").after(h1+id+hi+id+h2+username+h3+password+h4+age+h5+address+h6+h8+h9);});$(":checkbox[name=allCheck]").click(function(){//方式一//獲取當(dāng)前標(biāo)簽是否選中的boolean值/* var status = this.checked;//獲取其他新增的復(fù)選框var checks = $(":checkbox[name=ck]");if(status){//添加屬性//prop：獲取在匹配的元素集中的第一個(gè)元素的屬性值//prop(參數(shù)一，參數(shù)二)：參數(shù)一：標(biāo)簽名；參數(shù)二，參數(shù)屬性checks.prop("checked",status); }else{checks.prop("checked",false);} *///方式二$(":checkbox[name=ck]").prop("checked",this.checked);});//刪除全部標(biāo)簽 $("#delAllID").click(function(){//獲取選中的復(fù)選框并通過(guò)爺爺來(lái)刪除整一行$(":checkbox[name=ck]:checked").parent().parent().remove();});});//刪除一個(gè)function del(obj){//方式一//獲取父節(jié)點(diǎn)//alert(obj.parentNode);//方式二//獲取該標(biāo)簽的父標(biāo)簽的父標(biāo)簽然后移除自身$(obj).parent().parent().remove();};</script></head><body><table border="1" width="600px"><tr><th>選擇</th><th>編號(hào)</th><th>用戶名</th><th>密碼</th><th>年齡</th><th>住址</th><th>操作</th></tr><tr id="add"><td><input id="allCheck" type="checkbox" name="allCheck" /></td><td colspan="6"><a href="javascript:void(0)" id="delAllID" >全部刪除</a></td></tr></table><hr/><form><table border="1" width="300px"><tr><td>編號(hào)</td><td><input type="text" name="id" value="1"/></td></tr><tr><td>用戶名</td><td><input type="text" name="userName" value="2"/></td></tr><tr><td>密碼</td><td><input type="password" name="userPass"/></td></tr><tr><td>年齡</td><td><input type="text" name="age"/></td></tr><tr><td>住址</td><td><input type="text" name="c"/></td></tr><tr><td colspan="2" align="center"><input type="button" value="添加" id="addBtn"/><input type="reset" value="重置"/></td></tr></table></form></body> </html>
總結(jié)
以上是生活随笔為你收集整理的一个简单的jQuery例子，动态添加表格和删除的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JSON与Struts2的结合使用
- 下一篇： Struts2与jQuery框架的结合使