jQuery来写员工新增和删除（程序默写练习）

xjdkxnhcoskxbco

已于 2024-07-31 16:35:03 修改

阅读量321

点赞数 7

文章标签： javascript 前端服务器 html jquery

于 2024-07-30 14:42:13 首次发布

本文链接：https://blog.csdn.net/xjdkxnhcoskxbco/article/details/140795169

版权

3、获取父节点，以及通过父节点获取指定类型和位置的子节点

3、删除节点元素

4、获取节点元素的文本内容

5、val()函数和text()函数的区别

重要体会：！之所以不用循环，是比方说$("#a")是一个数组，数组中有元素点击，如果下面写还是写选择器名那么就选了全部，所以应该使用this

一、实现功能:

用jQuery来写员工新增和删除

如图所示：按delete删除整行，输入empno,empname,sal点击添加添加到下方

原格式文件：写在附录

二、涉及知识点

1、函数的写法：

（不是由常见的加载事件触发的函数）

    function 函数名(参数){
       函数方法
    }

2、confirm函数

格式：confirm（字符串）—弹出一个确认框

返回一个布尔类型的值，当点击确定，返回true,点击取消返回false

 if (confirm("是否删除" + ename + "的信息吗")) {
     函数体
}

3、获取父节点，以及通过父节点获取指定类型和位置的子节点

parent（）——获取指定节点的父节点

find(元素名)——获取指定节点下的子节点中的指定元素数组，可以隔代查找比如爷爷找孙子

eq(下标)——在find()之后获取该数组下标

格式:
$(js对象).parent().find("标签名").eq(下标)//获取某个元素

3、删除节点元素

empty()——清空当前元素节点的后代元素

remove()——删除当前元素节点以及所有后代元素

$(js对象).remove();
$(js对象).delete();

4、获取节点元素的文本内容

text()——获取元素节点中的文本内容

格式:
$(js对象).parent().find("标签名").eq(下标).text()//获取某个元素

5、val()函数和text()函数的区别

 <td>张三</td>

要获取张三就是text() 文本内容

要获取文本框中的内容就是val()

empno:<input class="input"type="text" id="empno"/>&nbsp;&nbsp;

6、创建一个节点

$("HTML代码")——我们需要将创建的节点html代码写入$（""）中即可

这里的$不是为了把js对象转成jQuery对象

7、挂载节点、插入节点

①appendTo 把新节点挂在在父节点的最后一个位置

2②新节点.prependTo(父节点)——将新节点挂在指定父节点下第一个位置

三、修改和默写

删除部分

首先写一个删除函数：写在窗体加载事件之外

     function del(aNode) {//传入一个节点
         //传入a节点下父节点的父节点的数组下标为1的值
         var ename = $(aNode).parent().parent().eq(1);
         if (confirm("是否删除" + ename + "的信息吗")) {
         }//注意写函数的时候不要用常见的英文动词，有可能是关键字
         $(aNode).parent().parent().remove;//注意这边标签a的父节点是td 不是tr，删除tr应该是父节点的父节点
         //注意remove和parent都是jQuery的函数，aNode是js的对象应该转型
     }

修改：tr节点下的数组是按元素分类的，哪怕四个元素都想相同，不应该写成

$(aNode).parent().parent().remove;

需要通过find(元素名)来获取指定节点下的子节点中的指定元素数组

改正：

 var ename = $(aNode).parent().parent().find("td").eq(1);

注意点：

①注意写函数的时候不要用常见的英文动词，有可能是关键字

 var ename = $(aNode).parent().parent().find("td").eq(1);

② 注意这边标签a的父节点是td 不是tr，删除tr应该是父节点的父节点

<tr >
        <td>1001</td>
        <td>张三</td>
        <td>8000</td>
        <td><a href="#" name="type">delete</a></td>
    </tr>

③注意remove和parent都是jQuery的函数，aNode是js的对象应该转型

$(aNode).parent().parent().remove;

错误处：remove函数没写括号（）

empty()——清空当前元素节点的后代元素

remove()——删除当前元素节点以及所有后代元素

confirm的内容是节点元素的文本内容，不是节点元素本身

删除函数

  function del(aNode) {//传入一个节点
         //传入a节点下父节点的父节点的数组下标为1的值
         var ename = $(aNode).parent().parent().find("td").eq(1).text();
         if (confirm("是否删除" + ename + "的信息吗")) {
         }//注意写函数的时候不要用常见的英文动词，有可能是关键字
         $(aNode).parent().parent().remove();//注意这边标签a的父节点是td 不是tr，删除tr应该是父节点的父节点
         //注意remove和parent都是jQuery的函数，aNode是js的对象应该转型
     }
         $(function () {
       //删除
             $("a").click(function () {
                 del(this);
             })

添加函数

  $("#add").click(function () {
                //读取元素
                var empno = $("#empno").val();
                var empname = $("#empname").val();
                var sal = $("#sal").val();
                var dele =$("<td><a href='#'>delete</a></td>");
                //创建一个tr节点，注意转成jQuery 格式$（"js对象"）
                var trNode =$("<tr></tr>");
                $("<td>"+empno+"</td>").appendTo(trNode);
                $("<td>"+empname+"</td>") .appendTo(trNode);
                $("<td>"+sal+"</td>") .appendTo(trNode);
                dele.appendTo(trNode);
                trNode.find("a").click(function () {
                    del(this)
                });//find可以隔代查找
                trNode.appendTo($("#tab"));

            })

原格式文件：写在附录

附录：

①原格式文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <style type="text/css">
      body{
          text-align: center;
      }
      table,td,th{
          border:1px solid black;
      }
      table{
          border-collapse: collapse;
          margin: 1px auto;
      }
      td,th{
          panding:10px,20px
      }

    </style>
    <script type="text/javascript">
        $(function () {
            //删除
            $("a").click(function () {
                $("a").parent().remove();
            })
            //新增
$("#add").click(function () {
    var eno=$("#empno").val();
    var ename=$("#empname").val();
    var sal=$("#sal").val();

    $("<th>"+eno+"</th>").
    appendTo($("#game"));
    $("<th>"+ename+"</th>").
    appendTo($("#game"))
    $("<th>"+sal+"</th>").
    appendTo($("#game"))


})
        })
    </script>
</head>
<body>
<h3>员工管理系统</h3>
empno:<input class="input"type="text" id="empno"/>&nbsp;&nbsp;
empname:<input class="input" type="text" id="empname"/>&nbsp;&nbsp;
sal:<input class="input" type="text" id="sal"/>&nbsp;&nbsp;
<button id="add">添加</button>
<br/>
<br/>
<br/>
<br/>
<table id="tab">
    <tr>
        <th>empno</th>
        <th>epname</th>
        <th>sal</th>
        <th></th>
    </tr>
    <tr >
        <td>1001</td>
        <td>张三</td>
        <td>8000</td>
        <td><a href="#" name="type">delete</a></td>
    </tr>
    <tr id>
        <td>1002</td>
        <td>李四</td>
        <td>8500</td>
        <td><a href="#" name="type">delete</a></td>
    </tr>
    </tr>
    <tr id>
        <td>1003</td>
        <td>王五</td>
        <td>9000</td>
        <td><a href="#" name="type">delete</a></td>

    </tr>
</table>
</body>
</html>

问题;不会指a标签，会把delete列（a标签）全部删完！注意a节点的parent节点是td!

$("a").click(function () {
                $(this).parent().parent().remove();
            })

常见jQuery选择器

①$（"元素名"）——元素选择器标签

重要体会：！之所以不用循环，是比方说$("#a")是一个数组，数组中有元素点击，如果下面写还是写选择器名那么就选了全部，所以应该使用this

不会新增一个tr 使得td挂载在上面：

解决:

$("#add").click(function () {
    var eno = $("#empno").val();
    var ename = $("#empname").val();
    var sal = $("#sal").val();
    var del
    = "<td><a href='#'>delete</a></td>";//注意不要占用关键字
    var trNode = $("<tr></tr>");

    $("<td>" + eno + "</td>").appendTo(trNode);
    $("<td>" + ename + "</td>").appendTo(trNode)
    $("<td>" + sal + "</td>").appendTo(trNode)
    $(del).appendTo(trNode);
    trNode.appendTo($("#tab"));
})

缺点;虽然也叫"a"但是不能删除，必须把删除功能分开赋值给

改进：


            //新增
$("#add").click(function () {
    var eno = $("#empno").val();
    var ename = $("#empname").val();
    var sal = $("#sal").val();
    var del
    = "<td><a href='#'>delete</a></td>";//注意不要占用关键字
    var trNode = $("<tr></tr>");

    $("<td>" + eno + "</td>").appendTo(trNode);
    $("<td>" + ename + "</td>").appendTo(trNode)
    $("<td>" + sal + "</td>").appendTo(trNode)
    $(del).appendTo(trNode);
    
    trNode.find("a").click(function () {
        $(this).parent().parent().remove();
    });

    trNode.appendTo($("#tab"));

6、parent（）——获取指定节点的父节点

find(元素名)——获取指定节点下的子节点中的指定元素数组

eq(下标)——在find()之后获取该数组下标

xjdkxnhcoskxbco

关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery来写员工新增和删除（程序默写练习）

不会指a标签，会把delete列（a标签）全部删完！注意a节点的parent节点是td!虽然也叫"a"但是不能删除，必须把删除功能分开赋值给。①$（"元素名"）——元素选择器标签。功能:用jq来写员工新增和删除。常见jQuery选择器。
复制链接

扫一扫