黑马程序员技术交流社区

标题: javascript如何用jq改写 [打印本页]
作者: 冯超    时间: 2013-4-29 17:01
标题: javascript如何用jq改写
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>case2.html</title>
  5.        
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta http-equiv="description" content="this is my page">
  8.     <meta http-equiv="content-type" content="text/html; charset=gbk2312">
  9.     <script language="JavaScript" src="../js/jquery.js"></script>
  10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  12.   </head>
  13.   
  14.   <body>
  15.             用户名：<input id="name" type="text" name="username">
  16.                 密     码：<input id="password" type="text" name="password">
  17.                 邮     箱: <input id="email" type="text" name="email">
  18.                 <input type="submit" value="提交">
  19.                  <br />
  20.                 <table border="1px">
  21.                         <tr>
  22.                                 <td>用户名</td>
  23.                                 <td>密码</td>
  24.                                 <td>邮箱</td>
  25.                                 <td>&nbsp</td>
  26.                         </tr>
  27.                         <tr>
  28.                                 <td>zhangsan</td>
  29.                                 <td>123456</td>
  30.                                 <td>383264679@qq.com</td>
  31.                                 <td><a href="#">delete</a></td>
  32.                         </tr>
  33.                         <tr>
  34.                                 <td>lisi</td>
  35.                                 <td>45667899</td>
  36.                                 <td>4454@163.com</td>
  37.                                 <td><a href="#">delete</a></td>
  38.                         </tr>
  39.                 </table>
  40.   </body>
  41.   <script type="text/javascript">
  42.           var i = 1;
  43.           window.onload = function() {
  44.                 $("input:eq(3)").click(function() {
  45.                         var name_value = $("#name").val();
  46.                         var password_value = $("#password").val();
  47.                         var email_value = $("#email").val();
  48.                         //1创建tr节点
  49.                         var $tr = $("<tr></tr");
  50.                         //2创建a节点
  51.                         var $a = $("<a></a>")
  52.                         $a.attr("href","#");
  53.                         $a.attr("id",i++);
  54.                         $a.text("delete");
  55.                         //3创建td节点
  56.                         var $name_td = $("<td></td>");
  57.                         $name_td.text(name_value);
  58.                         var password_td = $("<td></td>").text(password_value);
  59.                         var email_td = $("<td></td>").text(email_value);
  60.                         var $a_td = $("<td></td>").append($a);
  61.                         //4.将td添加到tr中
  62.                         $tr.append($name_td);
  63.                         $tr.append(password_td);
  64.                         $tr.append(email_td);
  65.                         $tr.append($a_td);
  66.                         //5.将tr添加到table中
  67.                         $("table:eq(0)").children().eq(0).append($tr);
  68.                        
  69.                         $a.click(function() {
  70.                                 return del_tdNode(this);
  71.                         });
  72.                 });
  73.                 //删除结点
  74.                 function del_tdNode(a) {
  75.                         var td = a.parentNode;
  76.                         var tr = td.parentNode;
  77.                         tr.parentNode.removeChild(tr);
  78.                         //alert(td.nodeName);
  79.                 //        var $tr = $("$td[0]:parent");//获取tr节点
  80.                         //$td.remove();
  81.                 }
  82.         }
  83.   </script>
  84. </html>
复制代码
function del_tdNode(a) {
                        var td = a.parentNode;
                        var tr = td.parentNode;
                        tr.parentNode.removeChild(tr);
                        //alert(td.nodeName);
                //        var $tr = $("$td[0]:parent");//获取tr节点
                        //$td.remove();
                }
这个函数如何用jq改下，晕·！
作者: 谭威    时间: 2013-4-29 18:25
function deleteUser($a){
               //获取要删除的用户名
                var $username=$a.parent().parent().children().eq(0).text();

                var flag=window.confirm("您真的要删除["+$username+"]这个用户吗 ?");
                if(!flag){
                    return false;
                }else{
                    //删除自己所在的tr
                    $a.parent().parent().remove();
                    return false;
                }

            }
写过同样的代码，好巧啊。



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2