【 js（JavaScript） table表格增删改】

Oaixamm

已于 2023-06-15 22:01:21 修改

阅读量255

点赞数

文章标签： html javascript

于 2023-06-15 21:59:44 首次发布

本文链接：https://blog.csdn.net/Oaixamm/article/details/131236623

版权

本文展示了一个使用JavaScript实现的HTML表格，用于管理学生信息的增删改操作。页面包含添加、修改表单，以及表格中的删除和修改按钮。通过JavaScript处理表单数据，动态更新表格内容。

摘要由CSDN通过智能技术生成

js（JavaScript） table表格增删改

要求：对学生表进行增删改

<!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>

</head>

<body>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="stuBody">
        </tbody>
    </table>

    <h4>添加</h4>
    <div style="width:300px;height:100px;border:1px soild black">
        <form action="#">
            编号：
            <input type="text" name="id" id="id">
            <br> 姓名：
            <input type="text" name="name" id="name">
            <br> 年龄：
            <input type="text" name="age" id="age">
            <br> 地址：
            <input type="text" name="address" id="address">
            <br>
            <input type="button" value="添加" onclick="add()">
        </form>
    </div>

    <h4>修改</h4>
    <div style="width:300px;height:100px;border:1px soild black">
        <form action="#">
            编号：
            <input type="text" name="id" id="idInput">
            <br> 姓名：
            <input type="text" name="name" id="nameInput">
            <br> 年龄：
            <input type="text" name="age" id="ageInput">
            <br> 地址：
            <input type="text" name="address" id="addressInput">
            <br>
            <input type="button" value="修改" onclick="updateObj()">
        </form>
    </div>

    <script>
        //初始化数据
        var stus = [
            { id: 1, name: '张三', age: 18, address: '成都成华区' },
            { id: 2, name: '李四', age: 17, address: '成都金牛区' },
            { id: 3, name: '王五', age: 19, address: '成都青羊区' },
            { id: 4, name: '刘六', age: 21, address: '成都双流区' },
        ]
        //向表格渲染数据
        function render(array = stus) {
            var tr = document.getElementById("stuBody");
            var str = ``;
            for (var i = 0; i < array.length; i++) {
                var obj = array[i];
                str += `<tr>
                <td>${obj.id}</td>
                <td>${obj.name}</td>
                <td>${obj.age}</td>
                <td>${obj.address}</td>
                <td>
                <input type="button" value="删除" οnclick="del(${obj.id})">
                <input type="button" value="修改" οnclick="getObj(${obj.id})">
            </td>
            </tr>`;
            }
            tr.innerHTML = str;
        }
        //调用渲染函数
        render();

        //目标1:点击删除按钮，删除学生对象
        function del(id) {
            //根据id获取学生对象的下标
            var index = stus.findIndex(n => n.id == id);
            //通过下标删除对应的对象  splice()函数从数组中添加或删除元素
            stus.splice(index, 1);
            //渲染
            render();
        }

        //目标2:点击添加按钮，添加学生对象
        function add() {
            //获取表单输入框数据
            let idElement = document.getElementById('id').value;
            let nameElement = document.getElementById('name').value;
            let ageElement = document.getElementById('age').value;
            let addressElement = document.getElementById('address').value;
            //验证数据是否填写完整
            if (idElement == '' || nameElement == '' || ageElement == '' || addressElement == '') {
                alert('请将数据填写完整');
                return;
            }
            //验证编号是否重复（默认学生id不重复）
            let index = stus.findIndex(n => n.id == idElement);
            if (index != -1) {
                alert('编号不能重复');
                return;
            }
            //将输入框数据封装成对象
            let obj = { id: idElement, name: nameElement, age: ageElement, address: addressElement };
            //将对象添加到学生数组中 push()向数组的末尾添加一个或更多元素，并返回数组的长度
            stus.push(obj);
            //渲染
            render();
            //输入框数据清空
            document.getElementById('id').value = '';
            document.getElementById('name').value = '';
            document.getElementById('age').value = '';
            document.getElementById('address').value = '';
        }

        //目标3：点击修改按钮，获取老数据然后修改
        var updateIndex = -1;
        function getObj(id) {
            //通过id获取对象
            let obj = stus.find(n => n.id == id);
            //获取修改数据的下标
            updateIndex = stus.findIndex(n => n.id == id);
            //将对象数据放入表单中
            let idElement = document.getElementById('idInput');
            idElement.value = obj.id;
            let nameElement = document.getElementById('nameInput');
            nameElement.value = obj.name;
            let ageElement = document.getElementById('ageInput');
            ageElement.value = obj.age;
            let addressElement = document.getElementById('addressInput');
            addressElement.value = obj.address;
        }
        function updateObj() {
            if (updateIndex == -1) {
                alert('请选择要修改的学生');
                return;
            }
            //获取输入框里面的内容
            let idInputValue = document.getElementById('idInput').value;
            let nameInputValue = document.getElementById('nameInput').value;
            let ageInputValue = document.getElementById('ageInput').value;
            let addressInputValue = document.getElementById('addressInput').value;
            //将输入框中获取的值封装成学生对象
            let obj = { id: idInputValue, name: nameInputValue, age: ageInputValue, address: addressInputValue };
            //将数据元素进行替换
            stus.splice(updateIndex, 1, obj);
            //渲染
            render();
            //输入框数据清除
            document.getElementById('idInput').value = '';
            document.getElementById('nameInput').value = '';
            document.getElementById('ageInput').value = '';
            document.getElementById('addressInput').value = '';
            updateIndex = -1;
        }



    </script>

</body>

</html>

表格样式

Oaixamm

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
【 js（JavaScript） table表格增删改】

js（JavaScript） table表格增删改要求：对学生表进行增删改<!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" co
复制链接

扫一扫