简单的基于Html+js的增删改查_html增删改查页面模板-CSDN博客

本文链接：https://blog.csdn.net/nndsb/article/details/140280018

简单的html+js的增删改查，源码已全部贴出，若有疑问或技术支持，请一键三连或评论区留言留下联系方式，看到后会第一时间联系，感谢支持！！

效果图：

功能截图：

主页面：

<!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>人员信息</title>
    <style>
        .wrap {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            margin: 0 auto;
            text-align: center;
        }

        table {
            margin: 0 auto;
        }

        table,
        td {
            padding: 10px;
            border-collapse: collapse;
            border: 1px solid black;
        }



        #tab {
            margin-top: 20px;
        }
    </style>
    <script src="operate.js"></script>
</head>
<body onload="search()">
<div class="wrap">
    <h1>人员信息表</h1>
    <div style="margin-top:20px"> 姓名：<input type="text" name="keyword" id="txtkeyword" value=""/>
    <button id="querybtn" onclick="search()">查询</button>  <button id="btn" onclick="toadd()">添加</button></div>
    <table id="tab">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
    </table>
</div>
<script></script>
</body>
</html>

新增页面：

<!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>
        .wrap {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            margin: 0 auto;
            text-align: center;
        }
    </style>
    <script src="operate.js"></script>
</head>
<body>
<div class="wrap">
    <form action="" name="form">
        <h1>添加信息</h1>
        <p>姓名:<input type="text" name="name" /></p>
        <p>年龄:<input type="number" name="age" /></p>
        <p><input type="button" id="addBtn" value="添加" onclick="add()"/></p>
    </form>
</div>
</body>
</html>

编辑页面：

<!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>
        .wrap {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            margin: 0 auto;
            text-align: center;
        }
    </style>
    <script src="operate.js"></script>
</head>
<body onload="updateById()">
<div class="wrap">
    <form action="" name="form">
        <h1>修改信息</h1>
        <p>姓名:<input type="text" name="name" /></p>
        <p>年龄:<input type="number" name="age" /></p>
        <p><input type="button" id="addBtn" value="修改" onclick="update()"/></p>
    </form>
</div>
</body>
</html>

关键js：

//创建数据库
var db = openDatabase("person", "1.0", "人员信息", 1024 * 1024);
//创建表
db.transaction(function(tx) {
        tx.executeSql("create table personInfo (id INTEGER PRIMARY KEY,name TEXT,age INTEGER)");
    })
    // 创建本地对象存储id
if (!localStorage.getItem("num")) {
    localStorage.setItem("num", 1);
}

//跳转到添加页面
function toadd() {
    location.href = "addInfo.html"
}

//添加
function add() {
    debugger
    var id = localStorage.getItem("num");
    var name = form.name.value;
    var age = form.age.value;
    db.transaction(function(tx) {
        tx.executeSql("insert into personInfo values(?,?,?)", [id, name, age], function() {
                console.log("添加成功");
            },
            function(tx, error) {
                console.log("error" + error.message);
            })
    })
    var num = parseInt(localStorage.getItem("num")) + 1;
    localStorage.setItem("num", num);
    location.href = "index.html";
}

//查询
function search() {
    debugger
    var keyword = document.getElementById("txtkeyword").value
    var sql = ""
    if (keyword == "") {
        sql += "select * from personInfo"
    } else {
        sql += "select * from personInfo where name like '%" + keyword + "%'"
    }
    db.transaction(function(tx) {
        tx.executeSql(sql, [], function(tx, result) {
                var arr = result.rows
                tab.innerHTML = ""
                for (var i = 0; i < arr.length; i++) {
                    var id = arr[i]["id"];
                    var name = arr[i]["name"];
                    var age = arr[i]["age"];
                    tab.innerHTML += "<tr>" +
                        "<td>" + id + "</td>" +
                        "<td>" + name + "</td>" +
                        "<td>" + age + "</td>" +
                        "<td><input type='button' value='修改' onclick='toupdata(" + id + ")'><input type='button' value='删除' onclick='deldata(" + id + ")'></td></tr>"
                }
            },
            function(tx, error) {
                console.log("error" + error.message);
            })
    })
}

//跳转到修改页面，并传递id参数
function toupdata(id) {
    location.href = "updateInfo.html?id=" + id;
}

//通过id查找数据
function updateById() {
    var id = location.search.substring(1).split("=")[1];
    db.transaction(function(tx) {
        tx.executeSql("select * from personInfo where id=" + id, [], function(tx, result) {
                var arr = result.rows;
                form.name.value = arr[0].name;
                form.age.value = arr[0].age;
                var inp = document.createElement("input");
                inp.value = id;
                inp.name = "id";
                inp.type = "hidden";
                document.getElementsByName("form")[0].appendChild(inp);
            },
            function(tx, error) {
                console.log("error" + error.message);
            });
    })
}

//修改
function update() {
    var id = form.id.value;
    var name = form.name.value;
    var age = form.age.value;
    db.transaction(function(tx) {
        tx.executeSql("update personInfo set name = ?,age = ? where id = ?", [name, age, id], function() {
                console.log("修改成功");
                location.href = "index.html";
            },
            function(tx, error) {
                console.log("error" + error.message);
            });
    })
}

//删除
function deldata(id) {
    var temp = confirm("确定要删除吗");
    if (temp) {
        db.transaction(function(tx) {
            tx.executeSql("delete from personInfo where id = ?", [id], function() {
                location.reload();
            });
        })
    }
}