js的增删改查

最新推荐文章于 2024-11-01 16:54:21 发布
最新推荐文章于 2024-11-01 16:54:21 发布
阅读量96 收藏
点赞数
分类专栏： 增删改查 文章标签： css html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58243616/article/details/120482109
版权

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

        .boss {

            width: 40%;

            height: 500px;

            border: 1px solid #00FFFF;

            text-align: center;

            float: left;

            font-size: 30px;

        }

        .boss input {

            width: 60%;

            height: 50px;

            font-size: 30px;

        }

        .box {

            width: 50%;

            float: right;

            text-align: center;

        }

        .btn {

            width: 200px;

            height: 40px;

            font-size: 20px;

            border-radius: 10px;

        }

    </style>

</head>

<body>

    <input type="text" id="sousuo" placeholder="请输入数据">

    <button class="sb">搜索</button>

    <div class="boss">

        <p>姓名：<input type="text" /></p>

        <p>年龄：<input type="text" /></p>

        <p>性别：<input type="text" /></p>

        <p>学号：<input type="text" /></p>

        <button class="btn">提交</button>

    </div>

    <table class="box" border="" cellspacing="" cellpadding="">

        <tr>

            <th>序号</th>

            <th>姓名</th>

            <th>年龄</th>

            <th>性别</th>

            <th>学号</th>

            <th>操作</th>

        </tr>

    </table>

</body>

<script>

    var box = document.querySelector(".box");

    var btn = document.querySelector(".btn");

    var inp = document.querySelectorAll(".boss input");

    var arr = [];

    var obj = true;

    btn.onclick = function () {

        if (!obj) {

            console.log("编辑");

            var str = {

                name: inp[0].value,

                age: inp[1].value,

                sex: inp[2].value,

                id: inp[3].value,

            }

            // trim()去除首尾空格

            for (var i = 0; i < inp.length; i++) {

                if (inp[i].value.trim() == "" || inp[i].value.trim() == null || inp[i].value.trim() == undefined) {

                    alert("信息不完善，请填写完整！");

                    return false;

                }

            }

            for (var i = 0; i < arr.length; i++) {

                if (arr[i].id == str.id) {

                    arr.splice(i, 1, str);

                }

            }

            var trs = document.querySelectorAll("tr");

            for (var i = 1; i < trs.length; i++) {

                if (str.id == trs[i].children[4].children[0].value) {

                    trs[i].children[1].innerHTML = str.name;

                    trs[i].children[2].innerHTML = str.age;

                    trs[i].children[3].innerHTML = str.sex;

                    trs[i].children[4].innerHTML = str.id;

                    var edits = trs[i].querySelector(".edits");

                    var saves = trs[i].querySelector(".saves");

                    saves.style.display = "none";

                    edits.style.display = "block";

                }

            }

            delNull();

        } else {

            var str = {

                name: inp[0].value,

                age: inp[1].value,

                sex: inp[2].value,

                id: inp[3].value,

            }

            // trim()去除首尾空格

            for (var i = 0; i < inp.length; i++) {

                if (inp[i].value.trim() == "" || inp[i].value.trim() == null || inp[i].value.trim() == undefined) {

                    alert("信息不完善，请填写完整！");

                    return false;

                }

            }

            if (arr.length > 0) {

                for (var i = 0; i < arr.length; i++) {

                    if (arr[i].id == str.id) {

                        alert("学号已存在，请重新输入！");

                        return false;

                    }

                }

                arr.push(str);

            } else {

                arr.push(str);

            }

            var trs = document.createElement("tr");

            box.appendChild(trs);

            var xh = document.createElement("td");

            xh.innerHTML = arr.length;

            trs.appendChild(xh);

            for (var i = 0; i < inp.length; i++) {

                var tds = document.createElement("td");

                trs.appendChild(tds);

                tds.innerHTML = inp[i].value;

            }

            var del = document.createElement("td");

            del.innerHTML = "<button οnclick='dels(this)'>删除</button>"

            trs.appendChild(del);

            var edit = document.createElement("td");

            edit.innerHTML = "<button class='edits' οnclick='edits(this)'>编辑</button><button class='saves' style='display: none;' οnclick='save(this)'>保存</button>"

            trs.appendChild(edit);

            var arrow = document.createElement("td");

            arrow.innerHTML = "<button  οnclick='up(this)'>向上</button><button οnclick='dw(this)'>向下</button>"

            trs.appendChild(arrow);

            delNull();

        }

    };

    //向下

    function dw(e) {

        var tds = document.querySelectorAll("tr");

        if (e.parentNode.parentNode.children[0].innerHTML == arr.length) {

            alert("是最后一行了")

        } else {

            for (var i = 1; i <= 4; i++) {

                var ten = e.parentNode.parentNode.children[i].innerHTML;

                e.parentNode.parentNode.children[i].innerHTML = e.parentNode.parentNode.nextSibling.children[i].innerHTML;

                e.parentNode.parentNode.nextSibling.children[i].innerHTML = ten;

            }

        }

    }

    //向上

    function up(e) {

        var tds = document.querySelectorAll("tr");

        if (e.parentNode.parentNode.children[0].innerHTML == 1) {

            alert("到顶了")

        } else {

            for (var i = 1; i <= 4; i++) {

                var ten = e.parentNode.parentNode.children[i].innerHTML;

                e.parentNode.parentNode.children[i].innerHTML = e.parentNode.parentNode.previousSibling.children[i].innerHTML;

                e.parentNode.parentNode.previousSibling.children[i].innerHTML = ten;

            }

        }

    }

    // 编辑

    function edits(e) {

        var fuIndex = e.parentNode.parentNode;

        for (var i = 1; i < 5; i++) {

            var inps = document.createElement("input");

            inps.setAttribute("type", "text");

            if (i == 4) {

                inps.setAttribute("disabled", "true");

            }

            inps.style.width = "40%";

            inps.value = fuIndex.children[i].innerHTML;

            var tds = fuIndex.children[i];

            fuIndex.children[i].innerHTML = "";

            tds.appendChild(inps);

            var edits = fuIndex.querySelector(".edits");

            edits.style.display = "none";

            var saves = fuIndex.querySelector(".saves");

            saves.style.display = "block";

        }

        var inpus = document.querySelectorAll(".boss input");

        for (var i = 0; i < inpus.length; i++) {

            inpus[i].value = fuIndex.children[i + 1].children[0].value;

            inpus[3].setAttribute("disabled", "true");

        }

        obj = false;

    }

    // 保存

    function save(e) {

        var fuIndex = e.parentNode.parentNode;

        var input = fuIndex.querySelectorAll("input");

        for (var i = 1; i <= input.length; i++) {

            fuIndex.children[i].innerHTML = input[i - 1].value;

            input[i - 1].remove();

        }

        for (var i = 0; i < arr.length; i++) {

            if (arr[i].id == input[3].value) {

                arr[i].name = input[0].value;

                arr[i].age = input[1].value;

                arr[i].sex = input[2].value;

                arr[i].id = input[3].value;

            }

        }

        console.log(arr);

        var edits = fuIndex.querySelector(".edits");

        edits.style.display = "none";

        var saves = fuIndex.querySelector(".saves");

        saves.style.display = "none";

        edits.style.display = "block";

        delNull();

    }

    // 删除

    function dels(e) {

        var fuIndex = e.parentNode.parentNode;

        console.log(fuIndex);

        fuIndex.remove();

        for (var i = 0; i < arr.length; i++) {

            if (arr[i].id == fuIndex.children[4].innerHTML) {

                arr.splice(i, 1);

            }

        }

        fh();

    }

    // 序号

    function fh() {

        var trs = document.querySelectorAll("tr");

        console.log(trs);

        for (var i = 1; i < trs.length; i++) {

            trs[i].children[0].innerHTML = i;

        }

    }

    // 清空

    function delNull() {

        var inpus = document.querySelectorAll(".boss input");

        for (var i = 0; i < inpus.length; i++) {

            inpus[i].value = "";

            inpus[i].removeAttribute("disabled");

        }

    }

    //搜索

    var sb = document.getElementsByClassName("sb")[0];

    sb.onclick = function () {

        var sou = document.getElementById("sousuo").value;

        var trr2 = document.querySelectorAll("tr");

        for (var i = 1; i < trr2.length; i++) {

            if (sou == "" || sou == null || sou == undefined) {

                trr2[i].style.display = "";

            } else {

                trr2[i].style.display = "none";

                if (trr2[i].children[4].innerHTML == sou) {

                    trr2[i].style.display = "";

                }

            }

        }

    }

</script>

</html>

效果图：

 

qq_58243616
关注
专栏目录
JavaScript实现简单的学生管理系统实现增删改查
m0_67463447的博客
03-15 1万+
JavaScript实现简单的学生管理系统实现增删改查 ** 效果图如下（代码放在下面） ** 总效果图 新增学生信息 查看学生信息 ** 修改学生学生信息 ** ** 代码部分 ** html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g
html+js实现增删改查，超简单
06-09
html+js实现增删改查，超简单
JS数组操作之增删改查
weixin_33720078的博客
08-20 285
JS提供了很多方便操作数组的方法，本文所要分享的就是如何快速对数组进行增、删、改、查。 一、增 1、push() 可接收任意数量的参数，把它们逐个添加至数组末尾，并返回修改后数组的长度。例如： var arr = []; var len = arr.push(1); console.log(arr); //...
原生html增删改查,原生js增删改查
weixin_39681161的博客
05-31 155
11var div = document.querySelector(".all");var p = document.querySelector("p");console.log(p.parentElement);//获取到整个11console.log(p.parentNode);//获取到整个11console.log(div.children);//获取到子元素p标签console.log...
js信息管理系统之数据增删查改
weixin_46073353的博客
05-23 1036
学习js中的一个小案例，做一个简易版的学生信息管理系统. 一开始给的是一个对象数组的信息的js文件。增删查改都是通过对数据进行操作，之后渲染道页面上。但是我们操作却不能直接修改源文件，所以先创建一个数组，将源文件上的数据传入数组之后再对我们数组进行操作 var arr = []; var ul = document.getElementsByClassName('user') function datadate() { for (let
JS增删改查
qq_45809464的博客
10-12 2425
js做动态增删改查 在学习js以后我们可以模拟后端，实现动态的页面增删改查 设计前端页面 完善基础样式 写增删改查的方法 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="index.css" rel="stylesheet" type="text/css"/> </
JavaScript 增删改查
mamayf的博客
05-17 906
实现 JavaScript 增删改查 htmlhtmlhtml 代码 <div class="container"> <div class="topview"> <div class="btnview" onclick="add"> <text>增加</text> </div> <div class="btnview" onclick="delall"
JS增删改查常用方法
zhaoyifei01的博客
02-11 2176
增删改查
bootstrap增删改查页面
04-14
这个“bootstrap增删改查页面”显然与使用Bootstrap来设计和实现数据管理界面有关，通常包括添加、编辑、删除和查询等功能。下面我们将深入探讨Bootstrap在构建这种页面时的关键知识点。 1. **响应式布局**：...
IndexedDB增删改查插件，分别对增删改查进行了封装，调用对应的函数即可
06-05
在人们的印象中，可能觉得只有做后端的小伙伴才会接触到数据库。其实在前端的领域里面也有数据库，只是可能用的比较少，因为前端存储方案有很多，比如cookie、sessionstorage等等。 在浏览器上有两种数据库：webSQL...
javascript js 操作数组 增删改查的简单实现
10-22
在JavaScript中，操作数组的增删改查是日常开发中的基本技能。下面将详细讲解如何通过简单的实现来完成数组中元素的增加、删除、修改和查询操作。 首先，我们需要了解JavaScript数组本身提供了许多操作方法，如push...
javaScript实现学生信息的增删改查，以及翻页
01-23
在这个特定的项目中，"javaScript实现学生信息的增删改查，以及翻页"，我们关注的是如何利用JavaScript来管理数据，并构建一个具有用户友好的界面。 首先，让我们深入了解增删改查（CRUD）操作。CRUD是创建（Create...
【前端基础】CSS进阶
qq_41413652的博客
11-01 789
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
第七章利用CSS和多媒体美化页面
2402_83227353的博客
10-29 871
用这个属性可以同时设置列表型属性（list一style-type），列表项图片属性（list-style-image）和列表项位置属性（list-style-position）。border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时（border-collapse 属性等于separate），相邻单元格边框之间的横向和纵向的间距。caption-side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption标签同时使用。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2082
【代码】炫酷的登录框!(附源码)
CSS例子: 横向排列的格子
最新发布
11-01 321
【代码】CSS例子: 横向排列的格子。
CSS浮雕效果
p_s_p的博客
10-30 259
【代码】CSS浮雕效果。
css实现antd丝带效果
m0_62323931的博客
11-01 342
【代码】css实现antd丝带效果。
js增删改查
05-30
JS 中增删改查通常指的是操作数组或对象的方法，具体如下： 1. 数组操作 - 增加：使用 `push()` 方法在数组末尾添加一个元素，或使用 `unshift()` 方法在数组开头添加一个元素。 - 删除：使用 `pop()` 方法删除...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值