爱站程序员基地案例
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><script src=\"./jquery引入文件/jquery-1.8.2.js\"></script><script>$(function() {// 给提交一个点计事件$(\"input[type=button]\").click(function() {// 获取姓名input中id为username的值var $username = $(\"#username\").val();// 获取年龄input中ID为age的值var $age = $(\"#age\").val();// 获取电话input中id为tel的值var $tel = $(\"#tel\").val();$(\"table\").append(\"<tr><td>\" + $username + \"</td><td>\" + $age + \"</td><td>\" + $tel + \"</td><td><a class=\'del\' href=\'javascript:ovid(0)\'>删除</a></td></tr>\");});// 点击删除按钮删除掉当前行// live:class为del的元素绑定一个live.使用live时候,后续添加元素也会与当前兄弟元素事件一样// parents 匹配祖先元素// parent 匹配父元素$(\".del\").live(\"click\", function() {$(this).parents(\"tr\").remove();})})</script></head><body><center><form action=\"\" method=\"post\">姓名: <input type=\"text\" name=\"username\" id=\"username\" value=\"\"><div></div>年龄: <input type=\"text\" name=\"age\" id=\"age\" value=\"\"><div></div>电话: <input type=\"text\" name=\"tel\" id=\"tel\" value=\"\"><br><input type=\"button\" name=\"\" id=\"\" value=\"提交\"></form><table border=\"1\"><tr><th>姓名</th><th>年龄</th><th>电话</th><th>操作</th></tr><tr><td>斩杀</td><td>22</td><td>11111111111111</td><td><a href=\"javascript:void(0) \" class=\"del\">删除</a></td></tr><tr><td>小三格格</td><td>16</td><td>11111111111111</td><td><a href=\"javascript:void(0) \" class=\"del\">删除</a></td></tr></table></center></body></html>
可删除可添加…代码无误
