WebAPIs-day4

Rookie_wbe

已于 2022-05-07 22:23:22 修改

阅读量336

点赞数

分类专栏： Web API实用案例文章标签： javascript 前端

于 2022-04-30 22:53:34 首次发布

本文链接：https://blog.csdn.net/JOUKELOVE/article/details/124342770

版权

Web API实用案例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

WebAPI-day4

文章目录

WebAPI-day4
案例：购物车
一、事件对象
二、事件流
三、事件委托
四、综合案例-渲染学生信息

案例：购物车

知识点
1. div span ul li 标签里有文字内容怎么得到或设置文字内容呢元素.innerText 元素.innerHTML
2. 表单 input 单选复选 textarea 怎么得到或设置值表单的value
3. 特殊的 button 是通过inner来设置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>购物车全选功能</title>
  <!-- 引入初始化 -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #666;
    }

    body {
      background: #fff;
      color: #666;
      font-size: 14px;
    }

    input {
      outline: none;
    }

    .clearfix::before,
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }
  </style>
  <!-- 引入购物车样式 -->
  <style>
    table {
      width: 800px;
      margin: 0 auto;
      border-collapse: collapse;
    }

    th {
      font: normal 14px/50px '宋体';
      color: #666;
    }

    th,
    td {
      border: none;
      text-align: center;
      border-bottom: 1px dashed #ccc;
    }

    input[type='checkbox'] {
      width: 13px;
      height: 13px;
    }

    tbody p {
      position: relative;
      bottom: 10px;
    }

    tbody .add,
    tbody .reduce {
      float: left;
      width: 22px;
      height: 22px;
      border: 1px solid #ccc;
      text-align: center;
      background: none;
      outline: none;
      cursor: pointer;
    }

    tbody input[type='text'] {
      width: 50px;
      float: left;
      height: 18px;
      text-align: center;
    }

    tbody .count-c {
      width: 98px;
      margin: 0 auto;
    }

    button[disabled] {
      color: #ddd;
      cursor: not-allowed;
    }

    tbody tr:hover {
      background: #eee;
    }

    tbody tr.active {
      background: rgba(241, 209, 149, 0.945);
    }

    .controls {
      width: 790px;
      margin: 10px auto;
      border: 1px solid #ccc;
      line-height: 50px;
      padding-left: 10px;
      position: relative;
    }

    .controls .del-all,
    .controls .clear {
      float: left;
      margin-right: 50px;
    }

    .controls p {
      float: right;
      margin-right: 100px;
    }

    .controls span {
      color: red;
    }

    .controls .pay {
      position: absolute;
      right: 0;
      width: 80px;
      height: 54px;
      background: red;
      font: bold 20px/54px '宋体';
      color: #fff;
      text-align: center;
      bottom: -1px;
    }

    .controls .total-price {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="car">
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" id="all" />全选</th>
          <th>商品</th>
          <th>单价</th>
          <th>商品数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="carBody">
        <tr>
          <td>
            <input class="s_ck" type="checkbox" readonly />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>忘仔牛奶</p>
          </td>
          <td class="price">5￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">5￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>优酸乳</p>
          </td>
          <td class="price">10￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">20￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>伊利纯牛奶</p>
          </td>
          <td class="price">20￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">40￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
        <tr>
          <td>
            <input class="s_ck" type="checkbox" />
          </td>
          <td>
            <img src="./images/01.jpg" />
            <p>安慕希</p>
          </td>
          <td class="price">35￥</td>
          <td>
            <div class="count-c clearfix">
              <button class="reduce" disabled>-</button>
              <input type="text" value="1" />
              <button class="add">+</button>
            </div>
          </td>
          <td class="total">70￥</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="controls clearfix">
      <a href="javascript:" class="del-all">删除所选商品</a>
      <a href="javascript:" class="clear">清理购物车</a>
      <a href="javascript:" class="pay">去结算</a>
      <p>
        已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0￥</span>
      </p>
    </div>
  </div>
  <script>
    // + - 删除都是相同的，一一对应的，我们完全可以用一个for来遍历绑定事件
    // +
    let adds = document.querySelectorAll('.add')
    
    // -
    let reduce = document.querySelectorAll('.reduce')
    // 删除
    let del = document.querySelectorAll('.del')
    // 获取输入框
    let inputs = document.querySelectorAll('.count-c input')
    // 单价price
    let prices = document.querySelectorAll('.price')
    // 小计 total
    let totals = document.querySelectorAll('.total')
    // 总价元素获取
    let totalResult = document.querySelector('.total-price')
    // 数量获取
    let count = document.querySelector('#totalCount')
    // tbody 获取过来
    let carBody = document.querySelector('#carBody')


    for(let i = 0;i < adds.length;i++) {
      // 开始的时候先核对一下小计
      totals[i].innerText = prices[i].innerText

      // 1.加号操作
      adds[i].addEventListener('click',function(){
        // 点击了谁，就让对应的输入框自增就行了 
        inputs[i].value++
        // 减号要启用
        reduce[i].disabled = false
        // 计算小计模块
        totals[i].innerText = parseInt(prices[i].innerText) * inputs[i].value + '￥'
        // 计算现在的总额  调用
        result() 
      })

      // 2.减号操作
      reduce[i].addEventListener('click',function(){
        // 点击了谁，就让对应的输入框自减就行了 
        inputs[i].value--

        // 判断如果表单里的值小于等于1 则禁用按钮
        if(inputs[i].value <= 1) {
          this.disabled = true
        }
        // 计算小计模块
        totals[i].innerText = parseInt(prices[i].innerText) * inputs[i].value + '￥'

        // 计算现在的总额  调用
        result()
      })

      // 3.删除操作
      del[i].addEventListener('click',function(){
        // 父元素.removeChild(子元素)
        // 我们要删除的是哪个元素 tr 他的父元素是 #carBody
        // 删除的是当前元素父级的父级  就是 tr 就是当前的tr
        carBody.removeChild(this.parentNode.parentNode)

        // 调用总计模块 在删除操作之后重新进行计算
        result()
      })
 
    } 

    // 计算总价  把所有的小计加起来的结果
    // 封装一个函数 便于后续直接使用
    function result () {
      // 不用担心totals和inputs会与外面同名的起冲突 因为作用域的存在，只在函数内起作用

      // 重新获取 total
      let totals = document.querySelectorAll('.total')
      // 重新获取输入框
      let inputs = document.querySelectorAll('.count-c input')


      let sum = 0
      let num = 0
      for (let i = 0;i < totals.length;i++) {
        sum = sum + parseInt(totals[i].innerText)
        num = num + Number(inputs[i].value)  // 这里inputs[i].value是字符串型，需要转化为数字型，可以用Number或者parseInt进行转化
      }
      totalResult.innerText = sum + '￥'
      count.innerText = num 
    }
    result()

  </script>
</body>

</html>

提示：以下是本篇文章正文内容，下面案例可供参考

一、事件对象

1. 获取事件对象

在这里插入图片描述

2. 事件对象常用属性

在这里插入图片描述
pageX和pageY跟文档坐标有关系

跟随鼠标案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <img src="./images/tianshi.gif" alt="">
    <script>
        let img = document.querySelector('img')
        document.addEventListener('mousemove',function(e) {
            // 不断得到当前的鼠标坐标
            // console.log(e.pageX)
            // console.log(e.pageY)
            // 把坐标给图片
            img.style.left = e.clientX - 50 + 'px' // 讲e.client换成e.page同样可以
            img.style.top = e.clientY - 40 + 'px'  // 50 和 40 是为了抵消图片自带的位置像素
        })
    </script>
</body>
</html>

按下回车发布微博案例

在这里插入图片描述
有关keyCode的详情可以在MDN中搜索

错误代码：

textarea.addEventListener('keydown',function(){
              alert(11)  // 这样写并不符合要求，因为案例要求是按下回车键时发布，但是目前这样只要在输入就会生效，需要改写
            })

正确代码：
关键是用“事件对象”来锁定回车键的触发效果，e.key === Enter
keydown(按下)：一般用来做拖拽效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>微博发布</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .w {
      width: 900px;
      margin: 0 auto;
    }

    .controls textarea {
      width: 878px;
      height: 100px;
      resize: none;
      border-radius: 10px;
      outline: none;
      padding-left: 20px;
      padding-top: 10px;
      font-size: 18px;
    }

    .controls {
      overflow: hidden;
    }

    .controls div {
      float: right;
    }

    .controls div span {
      color: #666;
    }

    .controls div .useCount {
      color: red;
    }

    .controls div button {
      width: 100px;
      outline: none;
      border: none;
      background: rgb(0, 132, 255);
      height: 30px;
      cursor: pointer;
      color: #fff;
      font: bold 14px '宋体';
      transition: all 0.5s;
    }

    .controls div button:hover {
      background: rgb(0, 225, 255);
    }

    .controls div button:disabled {
      background: rgba(0, 225, 255, 0.5);
    }

    .contentList {
      margin-top: 50px;
    }

    .contentList li {
      padding: 20px 0;
      border-bottom: 1px dashed #ccc;
      position: relative;
    }

    .contentList li .info {
      position: relative;
    }

    .contentList li .info span {
      position: absolute;
      top: 15px;
      left: 100px;
      font: bold 16px '宋体';
    }

    .contentList li .info p {
      position: absolute;
      top: 40px;
      left: 100px;
      color: #aaa;
      font-size: 12px;
    }

    .contentList img {
      width: 80px;
      border-radius: 50%;
    }

    .contentList li .content {
      padding-left: 100px;
      color: #666;
      word-break: break-all;
    }

    .contentList li .the_del {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 28px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="w">
    <!-- 操作的界面 -->
    <div class="controls">
      <img src="./images/9.6/tip.png" alt="" /><br />
      <!-- maxlength 可以用来限制表单输入的内容长度 -->
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount" id="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>
    </div>
    <!-- 微博内容列表 -->
    <div class="contentList">
      <ul id="list"></ul>
    </div>
  </div>

  <!-- 添加了hidden属性元素会直接隐藏掉 -->
  <li hidden>
    <div class="info">
      <img class="userpic" src="./images/9.6/03.jpg" />
      <span class="username">死数据:百里守约</span>
      <p class="send-time">死数据:发布于 2020年12月05日 00:07:54</p>
    </div>
    <div class="content">死数据:111</div>
    <span class="the_del">X</span>
  </li>

  <script>
    // maxlength 是一个表单属性, 作用是给表单设置一个最大长度

    // 模拟数据
    let dataArr = [
      { uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
      { uname: '女娲', imgSrc: './images/9.5/02.jpg' },
      { uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
      { uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
      { uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
      { uname: '张良', imgSrc: './images/9.5/06.jpg' },
      { uname: '安琪拉', imgSrc: './images/9.5/07.jpg' },
      { uname: '李白', imgSrc: './images/9.5/08.jpg' },
      { uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
      { uname: '墨子', imgSrc: './images/9.5/10.jpg' },
      { uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
      { uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
      { uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
      { uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
      { uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
      { uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
      { uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
      { uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
      { uname: '露娜', imgSrc: './images/9.5/19.jpg' },
      { uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
      { uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
      { uname: '百里玄策', imgSrc: './images/9.5/22.jpg' },
    ]


     /* 需求1： 检测用户输入字数
            1.注册input事件
            2.将文本的内容长度赋值给对应的数值
            3.表单的maxlength属性可以直接限制在200个数之间 */
            let textarea = document.querySelector('textarea')
            let useCount = document.querySelector('.useCount')
            // 发布按钮
            let send = document.querySelector('#send')
            // ul
            let ul = document.querySelector('#list')

            textarea.addEventListener('input', function(){
              // console.log(this.value.length)
              useCount.innerHTML = this.value.length
            })

       /* 需求2： 输入不能为空
            // 点击button之后判断
            判断如果内容为空，则提示不能输入为空，并且直接return不能为空
            防止输入无意义的空格，  使用字符串.trim()去掉首尾空格
            并将表单的value值设置为空字符串
            同时下面红色为设置为0 */
            send.addEventListener('click',function(){
              if(textarea.value.trim() === '') {
                // 并将表单的value值设置为空字符串
                textarea.value = ''  // 上面的是判断，这段是赋值
                // 同时下面红色为设置为0 */
                useCount.innerHTML = 0
                return alert('输入内容不能为空')
              }

              // 随机数
              function getRandom(min, max) {
		            return Math.floor(Math.random() * (max - min + 1)) + min
		          }
              let random = getRandom(0,dataArr.length - 1)

               // 需求3： 新增留言 （最重要）  写到send 的里面
               //   创建一个小li，然后里面通过innerHTML追加数据
                let li = document.createElement('li')
              //   随机获取数据数组里面的内容，替换newNode的图片和名字以及留言内容
                li.innerHTML = `
                    <div class="info">
                    <img class="userpic" src=${dataArr[random].imgSrc}>
                    <span class="username">${dataArr[random].uname}</span>
                    <p class="send-time">${new Date().toLocaleString()}</p>
                    </div>
                    <div class="content">${textarea.value}</div>
                    <span class="the_del">X</span>
                    `
           //  需求4： 删除留言
                // 在事件处理函数里面获取点击按钮，注册点击事件
                // （易错点：必须在事件里面获取，外面获取不到,因为最初状态是没有删除键的，消息发布之后才会出现删除键，所以要把它放进点击事件里获取）
                //   删除对应的元素（通过this获取对应的那条需要删除的元素）
                //   教你一招：放到追加进ul的前面，这样创建元素的同时顺便绑定了事件 
                 let del = li.querySelector('.the_del')   // 使用li.querySelector() 
                 del.addEventListener('click',function(){
                   // 删除操作 点击的是X  删除的小li 父元素.removeChild(子元素)
                  ul.removeChild(li)
                })
        //     利用时间对象将时间动态化  new Date().toLocaleString()

        //     追加给ul  用父元素.insertBefore(子元素,那个元素的前面)
                ul.insertBefore(li,ul.children[0])
                // 需求5： 重置
                // 将表单域内容重置为空
                textarea.value = ''  
                // 将userCount里面的内容重置为0
                useCount.innerHTML = 0
                    
            })



            // 按下回车可以生成留言信息
            // 事件监听的三要素
            textarea.addEventListener('keyup',function(e){
              // console.log(e) 已经废弃  
              // 只要e.key === Enter 即可
              if(e.key === 'Enter') {  // 当回车键触发时启用send.click()事件
                // 发布新闻
                // 只要敲击了回车键,键盘弹起，就自动触发点击按钮
                send.click()
              }
            })
  </script>
</body>

</html>

二、事件流

1.事件流与两个阶段说明

在这里插入图片描述

2.事件捕获和事件冒泡

在这里插入图片描述
如下列代码
子级son盒子在父盒子father之下，两者都有click点击事件，当子级click触发时，因为事件冒泡向上冒泡，也会触发父级father的click

    <style>
        .father {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>

    <script>
        let fa = document.querySelector('.father')
        let son = document.querySelector('.son')
        fa.addEventListener('click',function(){
            alert('父亲')
        })
        son.addEventListener('click',function(){
            alert('儿子')
        })
        document.addEventListener('dblclick',function(){
            alert('爷爷')
        })
    </script>

在这里插入图片描述

知识补充：dblclick 类似于单机事件，是双击事件，即点击两次触发事件
在这里插入图片描述

在这里插入图片描述

不写ture，就默认是false

3.阻止事件流动

在这里插入图片描述

fa.addEventListener('click',function(e){
            alert('父亲')
            e.stopPropagation()
        })
        son.addEventListener('click',function(e){
            alert('儿子')
            // 阻止流动阻止冒泡  Propagation 传播
            // 这样该事件只会在自己内部触发，不会流动
            e.stopPropagation()
        })
        document.addEventListener('click',function(){
            alert('爷爷')
        })

在这里插入图片描述

<body>
    <a href="http://www.baidu.com">跳转到百度</a>
    <script>
        let a = document.querySelector('a')
        a.addEventListener('click',function(e){
        	// 此时因为阻止了默认行为，点击a标签是无法跳转到百度页面的
            e.preventDefault()
        })
    </script>
</body>

两种注册事件的区别（仅作为一个了解）
在这里插入图片描述

当使用addEventListener时，最后一次事件不会覆盖之前的，会按顺序执行

在这里插入图片描述
remove移除事件

三、事件委托

在这里插入图片描述

<body>
    <ul>
        <li>我是第1个小li</li>
        <li>我是第2个小li</li>
        <li>我是第3个小li</li>
        <li>我是第4个小li</li>
        <li>我是第5个小li</li>
    </ul>

    <script>
        // 不要每个小li注册事件了 而是把事件委托给它的父级
        // 事件委托是给父级添加事件  而不是子级添加事件
        // 当小li没有的时候就会往上找父级有没有事件
        let ul = document.querySelector('ul')
        ul.addEventListener('click',function(e){
            // alert('我点击了')
            // 得到当前的元素
            e.target.style.color = 'red'
        })
    </script>
</body>

在这里插入图片描述

四、综合案例-渲染学生信息

在这里插入图片描述

此段代码是为了获得a标签的名字，方便后续进行处理

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/user.css">
</head>

<body>
  <h1>新增学员</h1>
  <div class="info">
    姓名：<input type="text" class="uname">
    年龄：<input type="text" class="age">
    性别: <select name="gender" id="" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <!-- 学号：<input type="text" class="stuId"> -->
    薪资：<input type="text" class="salary">
    就业城市：<select name="city" id="" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>

    </select>
    <button class="add">录入</button>
  </div>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>1001</td>
        <td>欧阳霸天</td>
        <td>19</td>
        <td>男</td>

        <td>15000</td>
        <td>上海</td>
        <td>
          <a href="javascript:">删除</a>
        </td>
      </tr> -->


    </tbody>
  </table>
  <script>
    //  1. 准备好数据后端的数据
    let arr = [
      { stuId: 1001, uname: 'TheShy', age: 19, gender: '男', salary: '20000', city: '上海' },
      { stuId: 1002, uname: 'Rookie', age: 29, gender: '男', salary: '30000', city: '北京' },
      { stuId: 1003, uname: 'Jackeylove', age: 39, gender: '男', salary: '2000', city: '北京' },
    ]

    // 获取父元素 tbody
    let tbody = document.querySelector('tbody')
     // 添加数据按钮
    // 获取录入按钮
    let add = document.querySelector('.add')
    // 获取各个表单的元素
    let uname = document.querySelector('.uname')
    let age = document.querySelector('.age')
    let gender = document.querySelector('.gender')
    let salary = document.querySelector('.salary')
    let city = document.querySelector('.city')
    // 渲染函数 把数组里面的数据渲染到页面中
    function render() {
      // 先干掉以前的数据  让tbody 里面原来的tr 都没有
      tbody.innerHTML = ''  //让它为空

      // 根据数据的条数来渲染增加tr
      for (let i = 0; i < arr.length; i++) {
        // 1.创建tr
        let tr = document.createElement('tr')
        // 2.tr里面放内容
        // 给删除按钮添加一个序列号，方便后续的删除代码查找具体要删除哪一栏的数据
        tr.innerHTML = `
        <td>${arr[i].stuId}</td>
        <td>${arr[i].uname}</td>
        <td>${arr[i].age}</td>
        <td>${arr[i].gender}</td>
        <td>${arr[i].salary}</td>
        <td>${arr[i].city}</td>
        <td>
          <a href="javascript:" id="${i}">删除</a> 
        </td>
        `
        
        // 3.把tr追加给tbody  父元素.appendChild(子元素)
        tbody.appendChild(tr)

        
      }
    }

    // 页面加载就调用函数
    render()

   

    add.addEventListener('click', function(){
      // 获得表单里面的值  之后追加给  数组arr  用push方法
      arr.push({ 
        // 得到数组最后一条数据的学号 1003 再加一就是当前的学号 1003 + 1
         stuId: arr[arr.length - 1].stuId + 1,
         uname: uname.value,
         age: age.value,
         gender: gender.value,
         salary: salary.value,
         city: city.value
        })
        // console.log(arr)
        // 重新渲染我们的数据
        render()

        // 复原所有的表单数据
        uname.value = age.value = salary.value = ''
        gender.value = '男'
        city.value = '北京'
    })

    // 删除操作， 删除的也是数组里面的数据，但我们用事件委托
    tbody.addEventListener('click',function(e){
      // alert(11)
      // 我们只能点击了链接，才会执行删除操作
      // 如何知道你点击了a？
      if(e.target.tagName === 'A') {
        // 删除操作 删除数组里面的数据 arr.splice(从哪里开始删, 1)
        // 我要得到a的id 
        arr.splice(e.target.id, 1)

        // 重新渲染我们的数据
        render()
      }

    })

  </script>
</body>

</html>