js+jquery+html实现纯前端通讯录

最新推荐文章于 2023-12-02 10:54:53 发布

VIP文章 Cx_aurora

最新推荐文章于 2023-12-02 10:54:53 发布

阅读量310

点赞数 1

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/qq_51290691/article/details/133710107

版权

使用js+jquery+html实现纯前端通讯录，包括联系人的增删改查以及展示详情

html部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <title>通讯录</title>
</head>
<style>
    .Contact {
     
        display: none;
        position: absolute;
        top: 20%;
        left: 34%;
        background-color: white;
        z-index: 2;
        width: 500px;
        height: 420px;
    }

    .Contact h2 {
     
        padding: 5px 20px;
        font-size: large;
        background-color: #555555;
        color: white;
    }

    .Contact .ifm {
     
        width: 300px;
        margin: 10px auto;
        display: flex;
        flex-flow: column nowrap;
    }

    .Contact .ifm div {
     
        margin: 10px;
    }

    .Contact .ifm div input {
     
        width: 220px;
        height: 20px;
    }

    .Contact .scbt {
     
        float: right;
        margin-top: 6px;
        margin-right: 30px;
    }

    .Contact .scbt button:first-of-type {
     
        width: 85px;
        height: 36px;
        background-color: #5cb85c;
    }

    .Contact .scbt button:last-of-type {
     
        width: 85px;
        height: 36px;
        background-color: white;
    }

    table {
     
        margin: 0 auto;
        width: 90%;
        text-align: center;
    }
</style>

<body onload="showStorage()">
    <div>
        <hr />
        <h1>通讯录</h1>
        <hr />
        <!-- 展示消息 -->
        <div>
            <div>
                <button id="add">新增</button>
                <script>
                    //点击新增按钮触发的动作
                    $("#add").click(function () {
     
                        $("#addContact").show();
                    });
                </script>
                <div>
                    <input type="text" name="person" id="search" placeholder="请输入联系人姓名">
                    <button type="button" onclick="search()">搜索</button>
                </div>
            </div>
            <table>
                <tbody>
                    <tr id="thead">
                        <td>序号</td>
                        <td>姓名</td>
                        <td>电话号</td>
                        <td>操作</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 新增联系人块 -->
    <div class="Contact" id="addContact">
        <h2>新增联系人</h2