JQuery实现动态添加删除评论的方法
本文实例讲述了JQuery实现动态添加删除评论的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>添加评论</title>
<styletype="text/css">
#tbListtd,#tbListth{border:1pxsolid#000;padding:5px;}
</style>
<scriptsrc="jquery-1.6.2.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
varjsonArr=
[
{"id":1,"name":"1刘德华","eamil":"123@126.com","gender":"男"},
{"id":2,"name":"2刘德华","eamil":"123@126.com","gender":"女"},
{"id":3,"name":"3刘德华","eamil":"133@126.com","gender":"女"},
{"id":4,"name":"4郭富城","eamil":"113@126.com","gender":"女"},
{"id":5,"name":"5张学友","eamil":"223@126.com","gender":"男"},
{"id":6,"name":"6孙红雷","eamil":"423@126.com","gender":"男"}
];
functionloadData(){
var$th="<tr><th>ID</th><th>姓名</th><th>邮箱</th><th>性别</th><th>操作</th></tr>";
$("#tbList").append($th);//添加表头
for(vari=0;i<jsonArr.length;i++){
//最后一列放一个空的内容，给删除链接留位置
var$tr=$("<tr><td>"+jsonArr[i].id+"</td><td>"+
jsonArr[i].name+"</td><td>"+
jsonArr[i].eamil+"</td><td>"+
jsonArr[i].gender+"</td><td></td></tr>");
var$link=$("<ahref='javascript:void(0)'>删除</a>");
$link.click(function(){//注册删除事件
$(this).parent().parent().remove();//删除当前行
});
$("td:last",$tr).append($link);//添加删除链接
$("#tbList").append($tr);
}
}
$(function(){
loadData();
//添加事件
$("#btnAdd").click(function(){
varid=$("#txtID").val();
varname=$("#txtName").val();
varemail=$("#txtEmail").val();
vargender=$("#txtGender").val();
if((id=="")||(name=="")||(email=="")||(gender=="")){
alert("请输入完整的信息");
return;
}
var$tr=$("<tr><td>"+id+"</td><td>"+name+"</td><td>"+
email+"</td><td>"+
gender+"</td><td></td></tr>");
var$link=$("<ahref='javascript:void(0)'>删除</a>");
$link.click(function(){
$(this).parent().parent().remove();
});
$("td:last",$tr).append($link);
$("#tbList").append($tr);
});
});
</script>
</head>
<body>
ID：<inputtype="text"id="txtID"/>
姓名：<inputtype="text"id="txtName"/>
email：<inputtype="text"id="txtEmail"/>
性别：<inputtype="text"id="txtGender"/><br/>
<inputid="btnAdd"type="button"value="添加"/>
<br/>
<tableid="tbList">
</table>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。