jquery-学生列表增删编辑，纯前端操作
》编写思路，题目素材
<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><meta charset="UTF-8"><title>Title</title><style>.modal{background: black;position:fixed;left:0;top:0;right:0;bottom:0;opacity: 0.4;display: none;}.info{position: fixed;background-color: white;width: 400px;height: 300px;left:50%;top: 50%;margin-top:-150px;margin-left:-200px;display: none;}form{width: 80%;height: 40%;/*background-color: yellow;*/margin: 50px auto 0;}</style><!-- js--><script>$(main);function main() {// 绑定事件，当取消的按钮被点击的时候，有一个函数对应$("#btn_cancle").click(dismiss_modal);// 绑定事件，当显示按钮被点击的时候，模态框显示$("#btn_show").click(show_modal);// 绑定事件，当提交按钮点击的时候，新增一行$("#btn_tijiao").click(add_line_data);// 点击提交添加一行function add_line_data() {// 数据的处理。。// 拿到学生姓名// 拿到所学专业// 计算下一行的序号//// 标签的处理，内存中准备。。。// tr行标签// td序号标签// td学生姓名标签// td所学专业标签// td通用的操作标签//// 标签的填入操作// tr标签的填入。 使用 父标签.append（子标签的方法填入）// tr标签append，序号标签 <tr><td>序号</td></tr>// tr标签append，学生标签 <tr><td>序号</td> <td>学生姓名</td></tr>// tr添加专业标签// tr添加操作标签//// 添加前 table标签是这样的 <table> <tr>第一行</tr></table>// table标签append，我们准备好的这个tr标签 <table> <tr>第一行</tr><tr>上面准备好的tr</tr> </table>}// 让模态框出现function show_modal() {$(".modal").css("display","block");$(".info").css("display", "block");}//让模态框消失function dismiss_modal() {// 目标，点击取消，让模态框消失// 拿到标签对象var $divInfo = $(".info");// 操作标签对象的属性，设置css的display为none$divInfo.css("display","none");$(".modal").css("display","none");}}</script>
</head>
<body><input type="button" value="添加学生" id="btn_show"><!--遮罩层-->
<div class="modal">1</div><!--信息层-->
<div class="info">
<!-- 表单--><form action="">姓名：<input type="text" name="username"> <br><select name="subject" id=""><option value="1">python</option><option value="2">php</option><option value="3">go</option><option value="4">java</option></select><br><input type="button" value="提交" id="btn_tijiao"><input type="button" value="取消" id="btn_cancle"></form>
</div><h1>学生列表</h1>
<table border="1">
<tr><td>序号</td><td>学生姓名</td><td>所选专业</td><td>操作</td>
</tr><tr><td>1</td><td>张三</td><td>python</td><td>编辑|删除</td>
</tr></table>
</body>
</html>
积极思考，尽量独力完成
jquery-学生列表增删编辑，纯前端操作相关推荐
- php编写一个学生类_PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
这个自己的小项目要先告一段落了.可能还有许多bug.请见谅 删除学生功能 PHP: // 这里是通过前端代码HTML中的 url 传过来的,用 $_GET 来获取(相关HTML代码可以看一下到主页看一 ...
- PHP 结合 Boostrap 结合 js 实现学生列表删除编辑以及搜索功能（完结）
这个自己的小项目要先告一段落了.可能还有许多bug.请见谅 删除学生功能 PHP: // 这里是通过前端代码HTML中的 url 传过来的,用 $_GET 来获取(相关HTML代码可以看一下到主页看一 ...
- jquery json取某个元素_JQuery前端操作JSON
一.关于Json的数据格式 从结构上看,所有的数据最终都可以分成三种类型: 第一种类型是scalar(标量),也就是一个单独的string(字符串)或数字(numbers),比如"北京&qu ...
- shp文件纯前端的上传、解析、编辑、下载
本文主要讲述一种体量较小的shp文件纯前端的上传.解析.编辑.下载的技术流程,适用于要素量少的shp文件修改操作. 准备工作 下载一下几个包,详细用法请见结尾参考. npm install file- ...
- 前端常用的【文件下载操作2】不获取后端文件流 【纯前端】实现：el-table表格下载为Excel文件【sheetJS XLSX】
--how are u gonna spend your life?(你将如何度过这一生) --I am not sure,but I do know,I am going to live every ...
- 纯前端大数据处理技术：葡萄城纯前端开发工具应用实践
SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,满足多平台.跨平台的表格数据处理和类 Excel 的表格应用开发. WijmoJS 前端开发工具包由多款纯 ...
- Vue纯前端：榜单管理系统
文章目录: 一.主要功能: 二.实现效果: 1.主页: 2.注册: 3.登录: 4.列表界面: 5.添加应用界面: 6.修改应用界面: 7.模糊查询: 三.整体架构: 四.配置文件说明: 五.功能说明 ...
- Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查 页面展示效果 一.页面结构 分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
- 新一代纯前端控件集 WijmoJS 2018V2发布，提供 Web 设计器，可动态设计页面并生成代码...
概述 作为一款纯前端控件集,WijmoJS 秉承"快如闪电,触控优先"的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进.除在全球率先支持 An ...
最新文章
- 《大话数据结构》第9章 排序 9.6 希尔排序（下）
- 趁年轻，去硅谷！2021 “神策未来星”春季校园招聘精英项目全面启动！你准备好了吗？
- 数学界的高冷之王，N次拒绝巨额奖金：我穷，但是我不缺钱。。。
- jdk中提供的Collection、Collections、Collector、Collectors你分的清楚？
- win7怎么跳过硬盘自检_DiskGenius 5.2.1发布！增强扇区复制功能，方便坏道硬盘做镜像！...
- 智能对话机器人之多轮对话工作机制 | Chatopera
- 学习笔记——游戏打击感
- js基础——图片切换实例(函数传参)
- 百篇已过，又是一个新篇章，谈谈感受吧
- 电脑系统重装怎么找回文件 重装系统文件怎么找回来
- 【数据结构】单链表（增、删、查、改）的实现 [初阶篇_ 复习专用]
- JSON 的文档数据库 RedisJson 介绍
- 2023年EasyRecovery数据恢复还会收费吗？
- 计算机图形学：Mesh
- 20年上海站D题Walker（二分，简洁）
- 读书笔记：《代码大全2》
- Contra-cnv
- 动态平衡网格交易_本周懒人大树数字币网格价值投资与主流币云算力挖矿实盘记录（12.19日更新）...
- 如何将多台物理机整合成一台
- 在线教育平台架构设计