扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > 其他 >jquery个人信息增删改查
  • 700

0
分享到

jquery个人信息增删改查

2023-05-18 17:05:49 700人浏览 八月长安
摘要

Jquery是一种方便快捷的javascript库，常用于处理html文档的交互、事件处理和动画效果等。本文将介绍如何利用jQuery实现个人信息的增删改查功能。一、准备工作首先，需要有一个包含个人信息的HTML表格，可以手动编写或者使用模

Jquery是一种方便快捷的javascript库，常用于处理html文档的交互、事件处理和动画效果等。本文将介绍如何利用jQuery实现个人信息的增删改查功能。

一、准备工作

首先，需要有一个包含个人信息的HTML表格，可以手动编写或者使用模板引擎生成。假设我们的表格包含了以下列头和数据：

<table id="info-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>联系方式</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>25</td>
            <td>138****1234</td>
            <td>
                <button class="edit-btn">编辑</button>
                <button class="delete-btn">删除</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>女</td>
            <td>30</td>
            <td>139****5678</td>
            <td>
                <button class="edit-btn">编辑</button>
                <button class="delete-btn">删除</button>
            </td>
        </tr>
        ...
    </tbody>
</table>

其次，需要一个表单用于添加和编辑信息。可以利用HTML构建表单，例如：

<fORM id="info-form">
    <input type="hidden" id="info-id" value="">
    <div>
        <label for="info-name">姓名：</label>
        <input type="text" id="info-name" name="name" required="required">
    </div>
    <div>
        <label for="info-gender">性别：</label>
        <input type="radio" id="info-gender-male" name="gender" value="male" required="required">
        <label for="info-gender-male">男</label>
        <input type="radio" id="info-gender-female" name="gender" value="female" required="required">
        <label for="info-gender-female">女</label>
    </div>
    <div>
        <label for="info-age">年龄：</label>
        <input type="number" id="info-age" name="age" required="required">
    </div>
    <div>
        <label for="info-phone">联系方式：</label>
        <input type="tel" id="info-phone" name="phone" required="required">
    </div>
    <div>
        <button type="submit" id="submit-btn">提交</button>
        <button type="button" id="cancel-btn">取消</button>
    </div>
</form>

其中，id为“info-id”的隐藏域用于记录正在编辑的信息的ID，value为空表示当前是添加操作，不为空表示当前是编辑操作。

二、添加信息

添加信息的操作比较简单，只需要监听表单的submit事件，获取表单数据并插入表格中即可。具体步骤如下：

  1. 监听submit事件：
$('#info-form').on('submit', function(e) {
    e.preventDefault();
    // ...
});
  1. 获取表单数据：
var formData = {
    name: $('#info-name').val(),
    gender: $('input[name="gender"]:checked').val(),
    age: $('#info-age').val(),
    phone: $('#info-phone').val()
};
  1. 插入表格中：
var newRow = $('<tr>')
    .append($('<td>').text(newId))
    .append($('<td>').text(formData.name))
    .append($('<td>').text(formData.gender === 'male' ? '男' : '女'))
    .append($('<td>').text(formData.age))
    .append($('<td>').text(formData.phone))
    .append($('<td>')
        .append($('<button>').addClass('edit-btn').text('编辑'))
        .append($('<button>').addClass('delete-btn').text('删除'))
    );
$('#info-table tbody').append(newRow);

其中，newId为新添加信息的ID，需要根据当前表格的最大ID加1生成。

三、编辑信息

编辑信息的操作比添加操作稍微复杂一些，需要先在表格中定位需要编辑的信息，然后将其数据填充至表单中，并监听表单的submit事件，完成更新后更新表格中原有的数据。具体步骤如下：

  1. 监听编辑按钮的click事件：
$('#info-table').on('click', '.edit-btn', function() {
    var row = $(this).closest('tr');
    var id = row.find('td:first-child').text();
    var name = row.find('td:nth-child(2)').text();
    var gender = row.find('td:nth-child(3)').text() === '男' ? 'male' : 'female';
    var age = row.find('td:nth-child(4)').text();
    var phone = row.find('td:nth-child(5)').text();
    $('#info-id').val(id);
    $('#info-name').val(name);
    $('input[name="gender"][value="' + gender + '"]').prop('checked', true);
    $('#info-age').val(age);
    $('#info-phone').val(phone);
    $('#submit-btn').text('更新');
});
  1. 监听表单的submit事件：
$('#info-form').on('submit', function(e) {
    e.preventDefault();
    var id = $('#info-id').val();
    var formData = {
        name: $('#info-name').val(),
        gender: $('input[name="gender"]:checked').val(),
        age: $('#info-age').val(),
        phone: $('#info-phone').val()
    };
    var row = $('#info-table').find('td:first-child').filter(function() {
        return $(this).text() === id;
    }).closest('tr');
    row.find('td:nth-child(2)').text(formData.name);
    row.find('td:nth-child(3)').text(formData.gender === 'male' ? '男' : '女');
    row.find('td:nth-child(4)').text(formData.age);
    row.find('td:nth-child(5)').text(formData.phone);
    $('#info-id').val('');
    $('#info-name').val('');
    $('input[name="gender"]').prop('checked', false);
    $('#info-age').val('');
    $('#info-phone').val('');
    $('#submit-btn').text('添加');
});

其中，利用find、filter和closest方法可以定位到需要编辑的行，并再次利用find方法获取该行中每一列的数据。

四、删除信息

删除信息相对简单，只需要在点击删除按钮时确认是否删除，并从表格中移除对应的行即可。具体步骤如下：

  1. 监听删除按钮的click事件：
$('#info-table').on('click', '.delete-btn', function() {
    var row = $(this).closest('tr');
    if (confirm('确定要删除该信息吗？')) {
        row.remove();
    }
});

其中，利用closest方法获取当前行，并利用remove方法将其从DOM树中移除。

到此为止，我们已经完成了个人信息的增删改查功能。完整的代码示例如下：

$(function() {
    $('#info-table').on('click', '.edit-btn', function() {
        var row = $(this).closest('tr');
        var id = row.find('td:first-child').text();
        var name = row.find('td:nth-child(2)').text();
        var gender = row.find('td:nth-child(3)').text() === '男' ? 'male' : 'female';
        var age = row.find('td:nth-child(4)').text();
        var phone = row.find('td:nth-child(5)').text();
        $('#info-id').val(id);
        $('#info-name').val(name);
        $('input[name="gender"][value="' + gender + '"]').prop('checked', true);
        $('#info-age').val(age);
        $('#info-phone').val(phone);
        $('#submit-btn').text('更新');
    });
    
    $('#info-form').on('submit', function(e) {
        e.preventDefault();
        var id = $('#info-id').val();
        var formData = {
            name: $('#info-name').val(),
            gender: $('input[name="gender"]:checked').val(),
            age: $('#info-age').val(),
            phone: $('#info-phone').val()
        };
        if (id === '') {
            var newId = parseInt($('#info-table').find('td:first-child')
                .map(function() { return $(this).text(); }).get()
                .reduce(function(prev, curr) { return parseInt(prev) > parseInt(curr) ? prev : curr; })) + 1;
            var newRow = $('<tr>')
                .append($('<td>').text(newId))
                .append($('<td>').text(formData.name))
                .append($('<td>').text(formData.gender === 'male' ? '男' : '女'))
                .append($('<td>').text(formData.age))
                .append($('<td>').text(formData.phone))
                .append($('<td>')
                    .append($('<button>').addClass('edit-btn').text('编辑'))
                    .append($('<button>').addClass('delete-btn').text('删除'))
                );
            $('#info-table tbody').append(newRow);
        } else {
            var row = $('#info-table').find('td:first-child').filter(function() {
                return $(this).text() === id;
            }).closest('tr');
            row.find('td:nth-child(2)').text(formData.name);
            row.find('td:nth-child(3)').text(formData.gender === 'male' ? '男' : '女');
            row.find('td:nth-child(4)').text(formData.age);
            row.find('td:nth-child(5)').text(formData.phone);
            $('#info-id').val('');
            $('#info-name').val('');
            $('input[name="gender"]').prop('checked', false);
            $('#info-age').val('');
            $('#info-phone').val('');
            $('#submit-btn').text('添加');
        }
    });
    
    $('#info-table').on('click', '.delete-btn', function() {
        var row = $(this).closest('tr');
        if (confirm('确定要删除该信息吗？')) {
            row.remove();
        }
    });
    
    $('#cancel-btn').on('click', function() {
        $('#info-id').val('');
        $('#info-name').val('');
        $('input[name="gender"]').prop('checked', false);
        $('#info-age').val('');
        $('#info-phone').val('');
        $('#submit-btn').text('添加');
    });
});

以上就是jquery个人信息增删改查的详细内容，更多请关注编程网其它相关文章！

--结束END--

本文标题: jquery个人信息增删改查

本文链接: https://lsjlt.com/news/212223.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • jquery个人信息增删改查
    jQuery是一种方便快捷的Javascript库，常用于处理HTML文档的交互、事件处理和动画效果等。本文将介绍如何利用jQuery实现个人信息的增删改查功能。一、准备工作首先，需要有一个包含个人信息的HTML表格，可以手动编写或者使用模...
    99+
    2023-05-18
  • jquery增删改查指令
    JQuery是一种流行的JavaScript库，用于简化和加快编写JavaScript代码的过程，并且经常用于创建动态网页和网络应用程序。在本文中，我们将学习JQuery的增删改查指令，这些指令可使您轻松地实现CRUD操作（增加、检索、更新...
    99+
    2023-05-14
  • php怎么实现对新闻信息的增删查改
    PHP是一种开源的服务器端脚本语言，常被用于动态生成 Web 页面。与其它编程语言相比，PHP的语法简单易懂，入手容易，即使是初学者也可以很快上手。在 Web 开发中，新闻管理是很重要的一项工作。随着互联网的发展，新闻信息更新速度越来越快，...
    99+
    2023-05-14
    php
  • php如何实现对新闻信息的增删查改
    本文小编为大家详细介绍“php如何实现对新闻信息的增删查改”，内容详细，步骤清晰，细节处理妥当，希望这篇“php如何实现对新闻信息的增删查改”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。一、新闻管理系统的设计在设...
    99+
    2023-07-05
  • mysql增删改查
    表字段的增、删、改、查 增：alter table 表名 add 字段名 数据类型 【位置】； 删：alter table 表名 drop 字段名； 改：alter table 表名 modify 字段 数据类型 【位置】 重命名...
    99+
    2021-09-09
    mysql增删改查 数据库入门 数据库基础教程 数据库 mysql
  • mysql增删改查
    创建数据表：mysql> use simonwangDatabase changedmysql> show tables;Empty set (0.00 sec)mysql> create...
    99+
    2024-04-02
  • SQL增删改查
    一、数据定义语言 DDLcreate table Student(sno varchar2(3) not null,sname varchar2(8) not null,ssex var...
    99+
    2024-04-02
  • mongodb 增删改查
    （一）增：    db.collname.insert({name:"user1",age:"20"})  添加一条常规数据， &nbs...
    99+
    2024-04-02
  • golang增删改查
    Golang是一门高效的编程语言，被广泛应用于网络编程、系统编程、数据处理等领域。在Golang中，实现增删改查（CRUD）操作是非常常见的任务。本文将介绍如何使用Golang实现CRUD操作。一、数据库连接在Golang中连接数据库通常使...
    99+
    2023-05-15
  • html增删改查
    HTML是一门用于创建网页的标记语言，它使用标记和标签来描述页面的内容和结构。HTML标签不仅用于呈现页面的内容，还可以用于操作和管理页面的数据，包括增加、删除和修改。HTML的增删改查操作通常基于JavaScript来实现。JavaScr...
    99+
    2023-05-15
  • sqlserver jdbc增删改查
    随便个springboot的maven项目都可以。 pom.xml 配置 4.0.0 org.springframework.boot spring-boot-starter-pare...
    99+
    2014-05-04
    sqlserver jdbc增删改查
  • mybatis之增删改查
    目录jar包需要三个 连接数据库的以及mybatis的jar包下面创建数据库 复制到一個文档里面导入数据库即可mybatisUtils文件mybatis.xml配置文件Parking...
    99+
    2024-04-02
  • sql数据库信息增删改查的条件语句如何实现
    小编给大家分享一下sql数据库信息增删改查的条件语句如何实现，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！可以向数据库进行查询、可以向数据库插入数据、可以更新数据库中的数据、可以删除数据库中的...
    99+
    2024-04-02
  • MySQL 索引增删改查
    -- 场景：对现有的表，进行索引增删改查管理 -- 1. 增加索引 -- 普通索引 alter table table_name add index index_name (column_list) ; -- 唯一索引 alter ta...
    99+
    2016-06-26
    MySQL 索引增删改查
  • sql 常见增删改查
    操作数据(DML) 2.1 插入数据（添加）插入语句:一次插入操作只插入一行.INSERT INTO table_name (column1,column2,column3...)VALUES(v...
    99+
    2024-04-02
  • 表记录增删改查
    案例1：INSERT插入表记录 案例2：UPDATE和DELETE 案例3：SELECT查询表记录 案例4：WHERE简单匹配 案例5：WHERE高级匹配 案例6：整理查询结果 案例...
    99+
    2024-04-02
  • 数据库增删改查
    1.插入数据 INSERT INTO phpyun_member(username,password,email,salt) VALUES ('','c33d068c...
    99+
    2024-04-02
  • SpringDataJpa:JpaRepository增删改查操作
    Jpa查询 1. JpaRepository简单查询 基本查询也分为两种，一种是spring data默认已经实现，一种是根据查询的方法来自动解析成SQL。 预先生成方法 spri...
    99+
    2024-04-02
  • MongoDB实现增删改查
    一、增加 insert向数据库中插入集合 插入一条记录，传入集合 db..insert() db.students.insert({name:"唐僧",age:60,gender:"...
    99+
    2024-04-02
  • MySQL增删改查(基础)
    目录 一,增加(Create) 1.1 单行数据+全列插入 1.2 多行数据插入 1.3 指定列插入 二,查询(Retrieve) 2.1 全列查询 2.2 指定列查询 2.3 表达式查询 2.4 去重操作 2.5 排序(order by...
    99+
    2023-08-31
    mysql 数据库
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作