WebApi-表格注册事件处理

最新推荐文章于 2024-07-18 20:18:47 发布

可乐~！

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量200

点赞数 2

文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_45650436/article/details/121984861

版权

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      color: #721c24;
    }

    h1 {
      text-align: center;
      color: #333;
      margin: 20px 0;
    }

    table {
      margin: 0 auto;
      width: 800px;
      border-collapse: collapse;
      color: #004085;
    }

    th {
      padding: 10px;
      background: #cfe5ff;

      font-size: 20px;
      font-weight: 400;
    }

    td,
    th {
      border: 1px solid #b8daff;
    }

    td {
      padding: 10px;
      color: #666;
      text-align: center;
      font-size: 16px;
    }

    tbody tr {
      background: #fff;
    }

    tbody tr:hover {
      background: #e1ecf8;
    }

    .info {
      width: 900px;
      margin: 50px auto;
      text-align: center;
    }

    .info input {
      width: 80px;
      height: 25px;
      outline: none;
      border-radius: 5px;
      border: 1px solid #b8daff;
      padding-left: 5px;
    }

    .info button {
      width: 60px;
      height: 25px;
      background-color: #004085;
      outline: none;
      border: 0;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
    }

    .info .age {
      width: 50px;
    }
  </style>
</head>

<body>
  <h1>新增学员</h1>
  <form action="">
    <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="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>
  </form>

  <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:" class="delete">删除</a>
          </td>
        </tr> -->
    </tbody>
  </table>

  <script>
    //获取元素
    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') //城市
    let add = document.querySelector('.add') //录入
    let i = 1001

    //注册事件，点击录入，新增在tbody里面
    add.onclick = function (e) {
      //表单form需要阻止默认事件
      e.preventDefault()
      //判断非空条件，如果用户没有输入内容，提醒用户输入内容不能为空 (一个都没输入也提醒)
      //uname.value.trim() 输入空格也不可以 (.trim())
      if (uname.value.trim() == '' || age.value.trim() == '' || salary.value.trim() == '') {
        alert('内容不能为空')
      } else {
        //新增元素tr到tbody里面
        let tr = document.createElement('tr')

        //给tr赋值
        tr.innerHTML = `
        <tr>
          <td>${i++}</td>
          <td>${uname.value}</td>
          <td>${age.value}</td>
          <td>${gender.value}</td>
          <td>${salary.value}</td>
          <td>${city.value}</td>
          <td>
            <a href="javascript:" class="delete">删除</a>
          </td>
        </tr>
        `
        let tbody = document.querySelector('tbody')
        tbody.appendChild(tr)
      }
      let form = document.querySelector('form')
      form.reset()
    }
    //删除按钮 事件委托，给父元素tbody注册事件，让子元素删除
    let tbody = document.querySelector('tbody')
    let tr = document.querySelector('tr')
    tbody.onclick = function (e) {
      if (e.target.className == 'delete') {
        tbody.removeChild(e.target.parentNode.parentNode)
      }
    }
  </script>
</body>

</html>

可乐~！

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebApi-表格注册事件处理

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" /> <title></title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; color: #721c24; } .
复制链接

扫一扫