JavaScript基础操作3-3
JavaScriptrome js
JavaScript js
发布日期:   2020-02-29
作者:   四两波千斤
文章字数:   2k
阅读时长:   10 分

4.2、事件操作

绑定事件

  • 方式一

    通过标签中的事件属性进行绑定。

    <button id="btn" onclick="执行的功能"></button>

  • 方式二

    通过 DOM 元素属性绑定。

    document.getElementById("btn").onclick = 执行的功能
let click = function(){}
let btn = document.getElementById("btn");
btn.onclick = function(){}

事件的语法，与匿名函数的语法一致。
对象中的属性，就是一个变量

  • 代码：

    <!DOCTYPE html>
事件


                                              


## 4.3、事件小结

- 事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行
- 常用的事件 onload onsubmit onclick ondblclick onblur onfocus onchange
- 绑定事件方式
  - 方式一：通过标签中的事件属性进行绑定
  - 方式二：通过 DOM 元素属性绑定

# 5、JavaScript综合案例 ***

## 5.1、案例效果介绍

- 在“姓名、年龄、性别”三个文本框中填写信息后，添加到“学生信息表”列表（表格）中。

![](.\img\综合案例-添加功能分析.png)

## 5.2、添加功能的分析

1. 为添加按钮绑定单击事件。
2. 创建 tr 元素。
3. 创建 4 个 td 元素。
4. 将 td 添加到 tr 中。
5.  获取文本框输入的信息。
6. 创建 3 个文本元素。
7. 将文本元素添加到对应的 td 中。
8. 创建 a 元素。
9. 将 a 元素添加到对应的 td 中。
10. 将 tr 添加到 table 中。

## 5.3、添加功能的实现

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
    <input type="button" value="添加" id="add">
</div>

    <table id="tb">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

    </table>

</body>
<script>
    //一、添加功能
    //1.为添加按钮绑定单击事件
    document.getElementById("add").onclick = function(){
        //2.创建行元素
        let tr = document.createElement("tr");
        //3.创建4个单元格元素
        let nameTd = document.createElement("td");
        let ageTd = document.createElement("td");
        let genderTd = document.createElement("td");
        let deleteTd = document.createElement("td");
        //4.将td添加到tr中
        tr.appendChild(nameTd);
        tr.appendChild(ageTd);
        tr.appendChild(genderTd);
        tr.appendChild(deleteTd);
        //5.获取输入框的文本信息
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let gender = document.getElementById("gender").value;
        //6.根据获取到的信息创建3个文本元素
        let nameText = document.createTextNode(name);
        let ageText = document.createTextNode(age);
        let genderText = document.createTextNode(gender);
        //7.将3个文本元素添加到td中
        nameTd.appendChild(nameText);
        ageTd.appendChild(ageText);
        genderTd.appendChild(genderText);
        //8.创建超链接元素和显示的文本以及添加href属性
        let a = document.createElement("a");
        let aText = document.createTextNode("删除");
        a.setAttribute("href","JavaScript:void(0);");
        a.setAttribute("onclick","drop(this)");
        a.appendChild(aText);
        //9.将超链接元素添加到td中
        deleteTd.appendChild(a);
        //10.获取table元素，将tr添加到table中
        let table = document.getElementById("tb");
        table.appendChild(tr);
    }
</script>
</html>

5.4、删除功能的分析

  • 删除功能介绍

  • 删除功能分析
  1. 为每个删除超链接添加单击事件属性。
  2. 定义删除的方法。
  3. 获取 table 元素。
  4. 获取 tr 元素。
  5. 通过 table 删除 tr。

5.5、删除功能的实现

//二、删除的功能
//1.为每个删除超链接标签添加单击事件的属性
//2.定义删除的方法
function drop(obj){
    //3.获取table元素
    let table = obj.parentElement.parentElement.parentElement;
    //4.获取tr元素
    let tr = obj.parentElement.parentElement;
    //5.通过table删除tr
    table.removeChild(tr);
}
赏
  目录