使用jQuery实现表格新增数据的效果
要实现这个效果我们需要先创建一个表格，创建完表格后再去创建一个新增的模态窗体，就是我们点击新增数据的按钮后会弹出这个模态窗体，然后再把模态窗里的内容填写完就可以新增的一个效果
- 首先我们先来布局：我们先引入bootstrap的CSS、JS和jQuery的插件，然后再去布局，我们先放一个div标签，并且给div标签添加类为container和mt-5，第一个类是必须要的，他相当于是用bootstrap的一个前提条件，没有这个就使用不了bootstrap插件，然后再在div中放入一个button按钮，这个按钮就是新增的按钮，按钮的type值为button，给按钮添加的类为btn、btn-success，这个类就是个按钮的颜色变为绿色
- 接着再在div中放入一个表格table标签，并且给表格添加ID和类，ID就为table，类为table、table-bordered、mt-3，这些类都是表格需要的基本的类，然后再table中放入thead标签，这个标签是table表格的表头标签，还有一个tbody标签，这个是table表格的内容标签，我们现在不需要在tbody中加入内容，因为我们后面会将新增的内容添加进来，我们只需要设定好表头就好了，表头我们要用到tr和th标签，th标签里的内容就是表头的内容，我们需要六个表头内容，分别为序号、姓名、性别、身份证号码、电话号码和地址，所以我们需要六个th标签来分别写入六个表头的内容，这样布局就基本完成了
- 其实我们的布局还没有完成还差一个新增的模态窗体，因为我要去bootstrap中去找一个，然后再复制粘贴到我们这里来，然后再在他原来的基础上多加了几个我们需要的input输入框等，就多复制了几条一样的标题和输入框，然后再改下标题就好了，可以看下模态窗的截图，而且这个模态窗是隐藏的：
- 模态窗分为三部分，分别是表头的标题部分、表格的内容部分以及结尾的两个确定和取消按钮部分，表格的内容部分就是我根据前面表头所需要的然后多复制了几份与其对应，到现在就搞定了布局了，接下来就是去写js了
- 在写js之前我们需要先去控制器中写查询数据和新增数据的方法，需要通过public ActionResult 方法名、来创建方法，这都是在引入了数据库和实例化实体模型后再来做的，如果没有的话就不行，然后再去查询数据，需要声明一个变量来接收数据，然后再把这个变量返回回去，我们查询的数据就是实例化实体模型里的一个表格里的数据，然后接着再去写新增的方法，并且需要传参，同样也需要声明一个变量再返回回去，新增的方法里有两个核心代码，就是实体模型.数据表.Add（方法的参数），还有实体模型.SaveChanges()，这个需要判断，如果大于0，就新增成功，反之则新增失败，这两个方法就完成了，我们再去写js
- 首先我们需要把控制器获取到的表格数据弄到我们的table表格上面，我们就在页面加载里面写，然后再通过jQuery的post方法去把数据弄过来，post方法里有两个参数，第一个就是控制器的地址（路径），另一个就是回调函数，回调函数中再传入一个参数，然后我们就在回调函数中写，我们就需要把获取到的数据与表格的名称分别对应，就需要声明一个变量，然后再通过for循环来遍历一下里面的数据，然后再通过我们回调函数的参数[i].studentName等数据一一获取到，然后再在for循环外把这些数据添加到表格的内容部分，需要获取到table表格的tbody部分用append方法将数据添加进去，而且每天学生的数据都要用td标签包裹起来，然后这些td标签又要用tr标签包裹起来就好了，再把这些赋值给变量并把变量添加到table表格中就好了，然后页面上就会呈现出我们获取到的数据，没懂的可以看下具体的代码
- 接下来就是新增学生数据的操作了，需要创建一个函数方法将模态窗体显示出来，函数方法就为inset（），方法里只需要写一条代码就行了，就是通过ID把模态窗获取到再通过modal（）方法里面写show让模态窗显示就好了，然后再给新增按钮绑定这个函数方法就行了，接着就就是把新增模态窗里的内容填完后就提交表单，发送到控制器，然后再让模态窗关闭或隐藏起来，这就又要新创建一个函数方法了，函数方法就为btn（），然后再方法里写具体的代码，需要通过那些姓名、性别等输入框的ID来获取到他们输入框里的内容或者值，然后再通过ID再把表单获取到并把表单序列化为一个数组，需要用serializeArry（）方法来实现
- 然后再通过if语句来判断模态窗里那些input框是否不为空或下拉框的value值不为0，要是有一个没填就弹出提示（未填完），否则就继续执行符合条件下面的代码，然后就是post请求方法，里面传了三个参数，第一个是新增的地址（路径），第二个是表单序列化后的数组，第三个就是回调函数了，回调函数中传入一个参数，再把这个参数用alert来弹出，这个内容就是控制器中写好的内容，是新增成功或者失败，然后再通过ID获取到模态窗体通过modal（）方法里传入hide将其关闭，再通过window.location.reload（）方法刷新页面，post方法外就写return false就好了，就不会执行弹出未填完的操作了，然后我们整个新增操作就完成了，可以看下代码：
