C通讯录<文件版>

目录

1、为什么改成文件版

2、改动之处

(1)保存信息到文件

(2)将增容编写成函数

(3)初始化里加载文件

3、完整代码

(1)test.c 文件

(2)contact.h 文件

(3)contact.c 文件


1、为什么改成文件版

我们之前写的通讯录运行起来的时候,可以给通讯录中增加、删除数据,此时数据是存放在内存中,当程序退出的时候,通讯录中的数据自然就不存在了,等下次运行通讯录程序的时候,数据又得重新录入,如果使用这样的通讯录就很难受。

而使用文件我们可以将数据直接存放在电脑的硬盘上,做到了数据的持久化,因而改成文件版。

  • 主要实现两个目标:
  1. 当通讯录退出的时候,把信息写到文件
  2. 当通讯录初始化的时候,加载文件的信息到通讯录中

2、改动之处

(1)保存信息到文件

  • contact.h 文件:
//保存通讯录信息到文件
void SaveContact(Contact* pc);
  • contact.c 文件:
//保存信息到文件
void SaveContact(Contact* pc)
{
	//打开文件
	FILE* pf = fopen("contact.txt", "w");
	if (pf == NULL)
	{
		perror("SaveContact");
		return;
	}
	//写文件
	int i = 0;
	for (i = 0; i < pc->sz; i++)
	{
		fwrite(pc->data + i, sizeof(PeoInfo), 1, pf);
	}
	//关闭文件
	fclose(pf);
	pf = NULL;
}

(2)将增容编写成函数

  • contact.h 文件:
//检测是否需要增容
void CheckCapacity(Contact* pc);
  • contact.c 文件:
//考虑增容的函数
void CheckCapacity(Contact* pc)
{
	if (pc->sz == pc->capacity)
	{
		PeoInfo* ptr = (PeoInfo*)realloc(pc->data, (pc->capacity + INC_SZ) * sizeof(PeoInfo));
		if (ptr != NULL)
		{
			pc->data = ptr;
			pc->capacity += INC_SZ;
			printf("增容成功\n");
		}
		else
		{
			perror("AddConract");
			printf("增加联系人失败\n");
			return;
		}
	}
}

(3)初始化里加载文件

  • contact.h 文件:
//加载文件内容到通讯录
void LoadContact(Contact* pc);
  • contact.c 文件:
void LoadContact(Contact* pc)
{
	FILE* pf = fopen("contact.txt", "r");
	if (pf == NULL)
	{
		perror("LoadContact");
		return;
	}
	//读文件
	PeoInfo tmp = { 0 };
	while (fread(&tmp, sizeof(PeoInfo), 1, pf))
	{
		//检测容量
		CheckCapacity(pc);
		pc->data[pc->sz] = tmp;
		pc->sz++;
	}
	//关闭文件
	fclose(pf);
	pf = NULL;
}

3、完整代码

(1)test.c 文件

#define _CRT_SECURE_NO_WARNINGS 1
#include"contact.h"
void menu()
{
	printf("*******************************************\n");
	printf("*******     1. add     2. del     *********\n");
	printf("*******     3. search  4. modify  *********\n");
	printf("*******     5. sort    6. print   *********\n");
	printf("*******     0. exit               *********\n");
	printf("*******************************************\n");
}
enum Option
{
	EXIT,
	ADD,
	DEL,
	SEARCH,
	MODIFY,
	SORT,
	PRINT
};
int main()
{
	int input = 0;
	//创建通讯录
	Contact con;//通讯录
	//初始化通讯录
	//给data申请一块连续的空间在堆上
	//sz=0
	//capacity初始化为当前最大的容量
	InitContact(&con);
	do
	{
		menu();
		printf("请选择:>");
		scanf("%d", &input);
		switch (input)
		{
		case ADD:
			//增加
			AddContact(&con);
			break;
		case DEL:
			//删除
			DelContact(&con);
			break;
		case SEARCH:
			//查找
			SearchContact(&con);
			break;
		case MODIFY:
			//修改
			ModifyContact(&con);
			break;
		case SORT:
			//排序
			SortContact(&con);
			break;
		case PRINT:
			//打印
			PrintContact(&con);
			break;
		case EXIT:
			//退出
			//保存信息到文件
			SaveContact(&con);
			//销毁通讯录
			DestoryContact(&con);
			printf("退出通讯录\n");
			break;
		default:
			printf("选择错误,重新选择\n");
			break;
		}
	} while (input);
	return 0;
}

(2)contact.h 文件

#pragma once
#include<stdio.h>
#include<string.h>
#include<stdlib.h>
#define MAX_NAME 20
#define MAI_SEX 10
#define MAX_TELE 12
#define MAX_ADDR 30
#define MAX 1000

#define DEFAULT_SZ 3
#define INC_SZ 2

//存放每个人的信息
typedef struct PeoInfo
{
	char name[MAX_NAME];
	char sex[MAI_SEX];
	int age;
	char tele[MAX_TELE];
	char addr[MAX_ADDR];
}PeoInfo;

//创建通讯录
typedef struct Contact
{
	PeoInfo* data; //指向动态申请的空间,用来存放联系人的信息
	int sz; //记录当前通讯录中有效信息的个数
	int capacity; //记录当前通讯录的最大容量
}Contact;

//初始化通讯录
void InitContact(Contact* pc);

//增加联系人
void AddContact(Contact* pc);

//打印联系人信息
void PrintContact(const Contact* pc);

//删除联系人信息
void DelContact(Contact* pc);

//查找指定联系人
void SearchContact(Contact* pc);

//修改指定联系人
void ModifyContact(Contact* pc);

//排序联系人
void SortContact(Contact* ps);

//销毁通讯录
void DestoryContact(Contact* pc);

//保存通讯录信息到文件
void SaveContact(Contact* pc);

//加载文件内容到通讯录
void LoadContact(Contact* pc);

//检测是否需要增容
void CheckCapacity(Contact* pc);

(3)contact.c 文件

#define _CRT_SECURE_NO_WARNINGS 1
#include"contact.h"
void LoadContact(Contact* pc)
{
	FILE* pf = fopen("contact.txt", "r");
	if (pf == NULL)
	{
		perror("LoadContact");
		return;
	}
	//读文件
	PeoInfo tmp = { 0 };
	while (fread(&tmp, sizeof(PeoInfo), 1, pf))
	{
		//检测容量
		CheckCapacity(pc);
		pc->data[pc->sz] = tmp;
		pc->sz++;
	}
	//关闭文件
	fclose(pf);
	pf = NULL;
}
//动态版本-初始化通讯录
void InitContact(Contact* pc)
{
	pc->data = (PeoInfo*)malloc(DEFAULT_SZ * sizeof(PeoInfo));
	if (pc->data == NULL)
	{
		perror("InitContact");
		return;
	}
	pc->sz = 0; //初始化后默认是0,一个元素都没
	pc->capacity = DEFAULT_SZ;

	//加载文件
	LoadContact(pc);
}

//考虑增容的函数
void CheckCapacity(Contact* pc)
{
	if (pc->sz == pc->capacity)
	{
		PeoInfo* ptr = (PeoInfo*)realloc(pc->data, (pc->capacity + INC_SZ) * sizeof(PeoInfo));
		if (ptr != NULL)
		{
			pc->data = ptr;
			pc->capacity += INC_SZ;
			printf("增容成功\n");
		}
		else
		{
			perror("AddConract");
			printf("增加联系人失败\n");
			return;
		}
	}
}
//动态版本-添加联系人
void AddContact(Contact* pc)
{
	//考虑增容
	CheckCapacity(pc);
	//增加一个人的信息
	printf("请输入名字:>");
	scanf("%s", pc->data[pc->sz].name);
	printf("请输入年龄:>");
	scanf("%d", &pc->data[pc->sz].age);
	printf("请输入性别:>");
	scanf("%s", &pc->data[pc->sz].sex);
	printf("请输入电话:>");
	scanf("%s", pc->data[pc->sz].tele);
	printf("请输入地址:>");
	scanf("%s", pc->data[pc->sz].addr);
	pc->sz++;
	printf("增加成功\n");
}

//打印联系人信息
void PrintContact(const Contact* pc)
{
	if (pc->sz == 0)
	{
		printf("通讯录为空!\n");
		return;
	}
	int i = 0;
	//打印标题
	printf("%-12s\t%-5s\t%-5s\t%-12s\t%-20s\n", "名字", "年龄", "性别", "电话", "地址");
	//打印数据
	for (i = 0; i < pc->sz; i++)
	{
		printf("%-12s\t%-5d\t%-5s\t%-12s\t%-20s\n",
			pc->data[i].name,
			pc->data[i].age,
			pc->data[i].sex,
			pc->data[i].tele,
			pc->data[i].addr
		);
	}
}

//查找要删除的联系人
static int FindByName(Contact* pc, char name[])
{
	int i = 0;
	for (i = 0; i < pc->sz; i++)
	{
		if (strcmp(pc->data[i].name, name) == 0)
		{
			return i;
		}
	}
	return -1; //找不到
}

//删除联系人信息
void DelContact(Contact* pc)
{
	char name[MAX_NAME] = { 0 };
	if (pc->sz == 0)
	{
		printf("通讯录为空,无需删除\n");
		return;
	}
	printf("请输入要删除人的名字:>");
	scanf("%s", name);
	//1、得先查找要删除的人
	//有/没有
	int pos = FindByName(pc, name);
	if (pos == -1)
	{
		printf("要删除的人不存在\n");
		return;
	}
	//2、删除
	int i = 0;
	for (i = pos; i < pc->sz - 1; i++)
	{
		pc->data[i] = pc->data[i + 1];
	}
	pc->sz--;
	printf("删除成功\n");
}


//查找指定联系人
void SearchContact(Contact* pc)
{
	char name[MAX_NAME] = { 0 };
	printf("请输入要查找人的名字:>");
	scanf("%s", name);
	int pos = FindByName(pc, name);
	if (pos == -1)
	{
		printf("要查找的人不存在\n");
		return;
	}
	else
	{
		int i = 0;
		//打印标题
		printf("%-12s\t%-5s\t%-5s\t%-12s\t%-20s\n", "名字", "年龄", "性别", "电话", "地址");
		//打印数据
		printf("%-12s\t%-5d\t%-5s\t%-12s\t%-20s\n",
			pc->data[pos].name,
			pc->data[pos].age,
			pc->data[pos].sex,
			pc->data[pos].tele,
			pc->data[pos].addr);
	}
}

//修改指定联系人
void ModifyContact(Contact* pc)
{
	char name[MAX_NAME] = { 0 };
	printf("请输入要修改人的名字:>");
	scanf("%s", name);
	int pos = FindByName(pc, name);
	if (pos == -1)
	{
		printf("要修改的人不存在\n");
		return;
	}
	else
	{
		printf("请输入名字:>");
		scanf("%s", pc->data[pos].name);
		printf("请输入年龄:>");
		scanf("%d", &pc->data[pos].age);
		printf("请输入性别:>");
		scanf("%s", &pc->data[pos].sex);
		printf("请输入电话:>");
		scanf("%s", pc->data[pos].tele);
		printf("请输入地址:>");
		scanf("%s", pc->data[pos].addr);
		printf("修改成功\n");
	}
}

//通过姓名排序
int CmpByName(const void* e1, const void* e2)
{
	return strcmp(((PeoInfo*)e1)->name, ((PeoInfo*)e2)->name);
}
//通过年龄排序
int CmpByAge(const void* e1, const void* e2)
{
	return ((PeoInfo*)e1)->age - ((PeoInfo*)e2)->age;
}
//排序通讯录中联系人的先后顺序
void SortContact(Contact* ps)
{
	int input = 0;
	printf("1、姓名\t2、年龄\n");
	printf("请选择你要排序的方式:>");
	scanf("%d", &input);
	switch (input)
	{
	case 1:
		qsort(ps->data, ps->sz, sizeof(PeoInfo), CmpByName);//排序
		printf("排序成功\n");
		break;
	case 2:
		qsort(ps->data, ps->sz, sizeof(PeoInfo), CmpByAge);//排序
		printf("排序成功\n");
		break;
	default:
		printf("请输入有效数字\n");
	}
}

//销毁通讯录
void DestoryContact(Contact* pc)
{
	free(pc->data);
	pc->data = NULL;
	pc->sz = 0;
	pc->capacity = 0;
}


//保存信息到文件
void SaveContact(Contact* pc)
{
	//打开文件
	FILE* pf = fopen("contact.txt", "w");
	if (pf == NULL)
	{
		perror("SaveContact");
		return;
	}
	//写文件
	int i = 0;
	for (i = 0; i < pc->sz; i++)
	{
		fwrite(pc->data + i, sizeof(PeoInfo), 1, pf);
	}
	//关闭文件
	fclose(pf);
	pf = NULL;
}
  • 运行结果:

假设我们先前添加了几个信息:

 此时退出通讯录

当我们下次再打开时:

ubuntu的vscode怎么打中文/usr/bin/ld: /tmp/cc4ioZIT.o: warning: relocation against `_ZSt4cout' in read-only section `.text' /usr/bin/ld: /tmp/cc4ioZIT.o: in function `showMenu()': 通讯录管理系统.cpp:(.text+0x15): undefined reference to `std::cout' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x1d): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x24): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::endl<char, std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x2f): undefined reference to `std::ostream::operator<<(std::ostream& (*)(std::ostream&))' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x40): undefined reference to `std::cout' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x48): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x4f): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::endl<char, std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x5a): undefined reference to `std::ostream::operator<<(std::ostream& (*)(std::ostream&))' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x6b): undefined reference to `std::cout' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x73): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x7a): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::endl<char, std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x85): undefined reference to `std::ostream::operator<<(std::ostream& (*)(std::ostream&))' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x96): undefined reference to `std::cout' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x9e): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0xa5): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::endl<char, std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0xb0): undefined reference to `std::ostream::operator<<(std::ostream& (*)(std::ostream&))' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0xc1): undefined reference to `std::cout' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0xc9): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0xd0): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::endl<char, std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0xdb): undefined reference to `std::ostream::operator<<(std::ostream& (*)(std::ostream&))' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0xec): undefined reference to `std::cout' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0xf4): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0xfb): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::endl<char, std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x106): undefined reference to `std::ostream::operator<<(std::ostream& (*)(std::ostream&))' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x117): undefined reference to `std::cout' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x11f): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x126): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::endl<char, std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x131): undefined reference to `std::ostream::operator<<(std::ostream& (*)(std::ostream&))' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x142): undefined reference to `std::cout' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x14a): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x151): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::endl<char, std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x15c): undefined reference to `std::ostream::operator<<(std::ostream& (*)(std::ostream&))' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x16d): undefined reference to `std::cout' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x175): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x17c): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::endl<char, std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x187): undefined reference to `std::ostream::operator<<(std::ostream& (*)(std::ostream&))' /usr/bin/ld: /tmp/cc4ioZIT.o: in function `main': 通讯录管理系统.cpp:(.text+0x1c2): undefined reference to `std::cout' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x1ca): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x1d1): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::endl<char, std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x1dc): undefined reference to `std::ostream::operator<<(std::ostream& (*)(std::ostream&))' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x1ea): undefined reference to `std::cin' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x1f2): undefined reference to `std::istream::operator>>(int&)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x22e): undefined reference to `std::cout' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x236): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x23d): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::endl<char, std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&)' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x248): undefined reference to `std::ostream::operator<<(std::ostream& (*)(std::ostream&))' /usr/bin/ld: /tmp/cc4ioZIT.o: in function `__static_initialization_and_destruction_0(int, int)': 通讯录管理系统.cpp:(.text+0x2b0): undefined reference to `std::ios_base::Init::Init()' /usr/bin/ld: 通讯录管理系统.cpp:(.text+0x2cb): undefined reference to `std::ios_base::Init::~Init()' /usr/bin/ld: warning: creating DT_TEXTREL in a PIE collect2: error: ld returned 1 exit status
09-12
好的,你需要添加一些 JavaScript 代码来实现这些功能。以下是一个简单的实现: ``` // 定义一个数组用于存储联系人数据 let contacts = []; // 获取页面元素 const addBtn = document.querySelector('.add-btn'); const searchInput = document.querySelector('#search-input'); const contactList = document.querySelector('#contact-list'); const pageButtons = document.querySelector('#page-buttons'); const modal = document.querySelector('#modal'); const modalContent = document.querySelector('.modal-content'); const closeBtn = document.querySelector('.close'); const saveBtn = document.querySelector('#save-btn'); const cancelBtn = document.querySelector('#cancel-btn'); // 定义一些常量 const PAGE_SIZE = 10; // 每页显示的联系人数 const MAX_PAGES = 5; // 最多显示的页码数 // 获取指定页码的联系人数据 function getContacts(page) { const start = (page - 1) * PAGE_SIZE; const end = start + PAGE_SIZE; return contacts.slice(start, end); } // 计算总页数 function getTotalPages() { return Math.ceil(contacts.length / PAGE_SIZE); } // 渲染联系人列表 function renderContactList(page) { const contacts = getContacts(page); let html = ''; contacts.forEach(contact => { html += ` <tr> <td>${contact.name}</td> <td>${contact.phone}</td> <td>${contact.email}</td> <td> <button class="edit-btn" data-id="${contact.id}">编辑</button> <button class="delete-btn" data-id="${contact.id}">删除</button> </td> </tr> `; }); contactList.innerHTML = html; } // 渲染分页按钮 function renderPageButtons(currentPage) { const totalPages = getTotalPages(); let html = ''; if (totalPages > 1) { const startPage = Math.max(currentPage - Math.floor(MAX_PAGES / 2), 1); const endPage = Math.min(startPage + MAX_PAGES - 1, totalPages); for (let i = startPage; i <= endPage; i++) { html += `<button class="page-btn ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</button>`; } } pageButtons.innerHTML = html; } // 显示弹窗 function showModal(contact) { modal.style.display = 'block'; if (contact) { modalContent.dataset.mode = 'edit'; modalContent.dataset.id = contact.id; document.querySelector('#name').value = contact.name; document.querySelector('#phone').value = contact.phone; document.querySelector('#email').value = contact.email; } else { modalContent.dataset.mode = 'add'; modalContent.removeAttribute('data-id'); document.querySelector('#name').value = ''; document.querySelector('#phone').value = ''; document.querySelector('#email').value = ''; } } // 隐藏弹窗 function hideModal() { modal.style.display = 'none'; } // 添加联系人 function addContact(contact) { contact.id = new Date().getTime(); // 生成一个唯一的 ID contacts.push(contact); } // 修改联系人 function editContact(id, contact) { const index = contacts.findIndex(c => c.id === id); if (index !== -1) { contacts.splice(index, 1, contact); } } // 删除联系人 function deleteContact(id) { const index = contacts.findIndex(c => c.id === id); if (index !== -1) { contacts.splice(index, 1); } } // 初始化页面 function init() { // 绑定事件 addBtn.addEventListener('click', () => { showModal(); }); searchInput.addEventListener('input', () => { const keyword = searchInput.value.trim().toLowerCase(); const filteredContacts = contacts.filter(contact => { return contact.name.toLowerCase().includes(keyword) || contact.phone.includes(keyword); }); renderContactList(1); renderPageButtons(1); }); contactList.addEventListener('click', event => { const target = event.target; if (target.classList.contains('edit-btn')) { const id = Number(target.dataset.id); const contact = contacts.find(c => c.id === id); showModal(contact); } else if (target.classList.contains('delete-btn')) { const id = Number(target.dataset.id); deleteContact(id); renderContactList(1); renderPageButtons(1); } }); pageButtons.addEventListener('click', event => { const target = event.target; if (target.classList.contains('page-btn')) { const page = Number(target.dataset.page); renderContactList(page); renderPageButtons(page); } }); closeBtn.addEventListener('click', () => { hideModal(); }); saveBtn.addEventListener('click', event => { event.preventDefault(); const name = document.querySelector('#name').value.trim(); const phone = document.querySelector('#phone').value.trim(); const email = document.querySelector('#email').value.trim(); if (name && phone && email) { const contact = { name, phone, email }; const mode = modalContent.dataset.mode; const id = mode === 'edit' ? Number(modalContent.dataset.id) : null; if (mode === 'add') { addContact(contact); } else if (mode === 'edit' && id) { editContact(id, contact); } renderContactList(1); renderPageButtons(1); hideModal(); } }); cancelBtn.addEventListener('click', () => { hideModal(); }); // 初始化数据 for (let i = 1; i <= 50; i++) { addContact({ name: `联系人${i}`, phone: `13800000000${i}`, email: `test${i}@example.com` }); } renderContactList(1); renderPageButtons(1); } // 页面加载完成后初始化页面 document.addEventListener('DOMContentLoaded', () => { init(); }); ``` 你需要将这些代码添加到你的 HTML 文件中,并确保正确引入了 jQuery 库。然后你需要在页面中添加一个 ID 为 `search-input` 的搜索框,并在表格中的每一行中添加一个“编辑”按钮和一个“删除”按钮。你还需要在页面底部添加一个 ID 为 `page-buttons` 的容器,用于渲染分页按钮。最后,你需要添加一个 ID 为 `modal` 的弹窗,用于添加或编辑联系人。
评论 59
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三分苦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值