2021-06-28

使用jQuery实现表格新增数据的效果

要实现这个效果我们需要先创建一个表格,创建完表格后再去创建一个新增的模态窗体,就是我们点击新增数据的按钮后会弹出这个模态窗体,然后再把模态窗里的内容填写完就可以新增的一个效果

  1. 首先我们先来布局:我们先引入bootstrapCSSJSjQuery的插件,然后再去布局,我们先放一个div标签,并且给div标签添加类为containermt-5,第一个类是必须要的,他相当于是用bootstrap的一个前提条件,没有这个就使用不了bootstrap插件,然后再在div中放入一个button按钮,这个按钮就是新增的按钮,按钮的type值为button,给按钮添加的类为btn、btn-success,这个类就是个按钮的颜色变为绿色
  2. 接着再在div中放入一个表格table标签,并且给表格添加ID和类,ID就为table,类为table、table-bordered、mt-3,这些类都是表格需要的基本的类,然后再table中放入thead标签,这个标签是table表格的表头标签,还有一个tbody标签,这个是table表格的内容标签,我们现在不需要在tbody中加入内容,因为我们后面会将新增的内容添加进来,我们只需要设定好表头就好了,表头我们要用到tr和th标签,th标签里的内容就是表头的内容,我们需要六个表头内容,分别为序号姓名性别、身份证号码、电话号码和地址,所以我们需要六个th标签来分别写入六个表头的内容,这样布局就基本完成了
  3. 其实我们的布局还没有完成还差一个新增的模态窗体,因为我要去bootstrap中去找一个,然后再复制粘贴到我们这里来,然后再在他原来的基础上多加了几个我们需要的input输入框等,就多复制了几条一样的标题和输入框,然后再改下标题就好了,可以看下模态窗的截图,而且这个模态窗是隐藏的:

  1. 模态窗分为三部分,分别是表头的标题部分、表格的内容部分以及结尾的两个确定和取消按钮部分,表格的内容部分就是我根据前面表头所需要的然后多复制了几份与其对应,到现在就搞定了布局了,接下来就是去写js
  2. 在写js之前我们需要先去控制器中写查询数据新增数据的方法,需要通过public ActionResult 方法名、来创建方法,这都是在引入了数据库实例化实体模型后再来做的,如果没有的话就不行,然后再去查询数据,需要声明一个变量来接收数据,然后再把这个变量返回回去,我们查询的数据就是实例化实体模型里的一个表格里的数据,然后接着再去写新增的方法,并且需要传参,同样也需要声明一个变量再返回回去,新增的方法里有两个核心代码,就是实体模型.数据表.Add(方法的参数),还有实体模型.SaveChanges(),这个需要判断,如果大于0,就新增成功,反之则新增失败,这两个方法就完成了,我们再去写js
  3. 首先我们需要把控制器获取到的表格数据弄到我们的table表格上面,我们就在页面加载里面写,然后再通过jQuery的post方法去把数据弄过来,post方法里有两个参数,第一个就是控制器的地址(路径),另一个就是回调函数,回调函数中再传入一个参数,然后我们就在回调函数中写,我们就需要把获取到的数据与表格的名称分别对应,就需要声明一个变量,然后再通过for循环来遍历一下里面的数据,然后再通过我们回调函数的参数[i].studentName等数据一一获取到,然后再在for循环外把这些数据添加到表格的内容部分,需要获取到table表格的tbody部分用append方法将数据添加进去,而且每天学生的数据都要用td标签包裹起来,然后这些td标签又要用tr标签包裹起来就好了,再把这些赋值给变量并把变量添加到table表格中就好了,然后页面上就会呈现出我们获取到的数据,没懂的可以看下具体的代码

        

                 

      

  1. 接下来就是新增学生数据的操作了,需要创建一个函数方法将模态窗体显示出来,函数方法就为inset(),方法里只需要写一条代码就行了,就是通过ID把模态窗获取到再通过modal()方法里面写show让模态窗显示就好了,然后再给新增按钮绑定这个函数方法就行了,接着就就是把新增模态窗里的内容填完后就提交表单,发送到控制器,然后再让模态窗关闭或隐藏起来,这就又要新创建一个函数方法了,函数方法就为btn(),然后再方法里写具体的代码,需要通过那些姓名、性别等输入框的ID来获取到他们输入框里的内容或者,然后再通过ID再把表单获取到并把表单序列化为一个数组,需要用serializeArry()方法来实现
  2. 然后再通过if语句来判断模态窗里那些input框是否不为空或下拉框的value值不为0,要是有一个没填就弹出提示(未填完),否则就继续执行符合条件下面的代码,然后就是post请求方法,里面传了三个参数,第一个是新增的地址(路径),第二个是表单序列化后的数组,第三个就是回调函数了,回调函数中传入一个参数,再把这个参数用alert来弹出,这个内容就是控制器中写好的内容,是新增成功或者失败,然后再通过ID获取到模态窗体通过modal()方法里传入hide将其关闭,再通过window.location.reload()方法刷新页面,post方法外就写return false就好了,就不会执行弹出未填完的操作了,然后我们整个新增操作就完成了,可以看下代码:

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数: gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点: 完后运行,r gdb 中的有用命令 下面是一个有用的 gdb 命令子集,按可能需要的顺序大致列出。 第一列给出了命令,可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布: 一元高斯分布:(将多元高斯分布中的D取值1) 其中代表的是平均值,是方差的平方,也可以用来表示,是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要,需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容,经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch ,简称ES 。是一个全文搜索服务器,也可以作为NoSQL 数据库,存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项: (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候,访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议:以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么? 在java规范中是这样描述的:Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联,线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口,远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统: 微信小程序——辩论管理前台涉及技术:WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能,出了大概一年了。 程序员们在编程时遇到不会的问题,又没有老师可以提问,就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法,但是不一定得到回复,…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎,题目很狗,第一次踩这个坑,单拉出来写个题解记录一下 题意:给一个数字矩阵,一次操作:对于每一行,可以去掉左端或者右端的数,得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1)全特化2)偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类: 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…