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程序设计有所帮助。