JavaScript实现动态操作表格

.ASEN.

已于 2022-05-17 15:06:24 修改

阅读量412

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript作业文章标签： javascript 前端开发语言

于 2022-05-17 15:05:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47304332/article/details/124821732

JavaScript作业专栏收录该内容

14 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="样式.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>新增学员</h1>
<div class="info">
    姓名：<input type="text" class="uname"> 年龄：
    <input type="text" class="age"> 性别:
    <select name="gender" 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>
    </select>
    <button class="add" onclick="addStudent(this.parentNode)">录入</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="#" onclick="deleteStudent(this)">删除</a>
        </td>
    </tr>
    </tbody>
</table>
<script>
    // 1. 准备阶段 利用 数组 模拟 数据
    let arr = [{
        stuId: 1001,
        uname: '刘备',
        age: 19,
        gender: '男',
        salary: '20000',
        city: '上海'
    }, {
        stuId: 1002,
        uname: '关羽',
        age: 29,
        gender: '男',
        salary: '30000',
        city: '北京'
    }, {
        stuId: 1003,
        uname: '张飞',
        age: 39,
        gender: '男',
        salary: '2000',
        city: '北京'
    }];

    var tbody = document.querySelector("tbody");
    var id = 1004;

   reFlash();       //刷新网页

    function reFlash(){
       tbody.innerHTML = "";
        for (let itme in arr){              //遍历数组的每个对象
            var tr = document.createElement("tr");
            for (let val in arr[itme]){         //遍历对象的属性
                let td = document.createElement("td");
                td.innerText = arr[itme][val];      //属性填充到tbody
                tr.append(td);
            }
            tr.append(deletebtn());             //添加删除按钮
            tbody.append(tr);
        }
    }

    function deleteStudent(dom){            //删除节点
        tbody.removeChild(dom.parentNode.parentNode);       //找到当前节点所在的行（tr）
    }


    function addStudent(form){          //添加学生
        let tr = document.createElement("tr");
        var chileds = form.children;    //children返回当前节点的所有孩子节点，返回值是集合
        let tdID = document.createElement("td");
        var newStu =  {
            stuId: id,
            uname: '',
            age: 0,
            gender: '',
            salary: '',
            city: ''
        };
        tdID.innerHTML = id++;
        tr.append(tdID);                //添加id
        for(let i=0; i < 5; i++){       //遍历form中的内容，创建行
            let td = document.createElement("td");
            td.innerHTML = chileds[i].value;
            newStu[chileds[i].className] = chileds[i].value;
            tr.append(td);
        }
        tr.append(deletebtn(tr));   //添加删除按钮
        arr.push(newStu);
        tbody.append(tr);
    }
    
    function deletebtn(index){           //删除按钮
        let a = document.createElement("a");
        a.href = "#";
        a.id = index;
        a.onclick = function (){        //删除操作
            arr.splice(this.id,1);
            deleteStudent(this);
        }
        a.innerHTML = "删除";
        let td = document.createElement("td");
        td.append(a);
        return td;                  //返回按钮节点
    }

</script>
</body>
</html>

* {
  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;
}

在这里插入图片描述