新增修改表格数据

这篇博客介绍了如何使用jQuery和Bootstrap模态窗体新增和修改表格数据。首先,引入Bootstrap JS并确保它在jQuery之后。点击新增按钮,弹出模态窗体,表单数据序列化后通过POST提交到控制器。对于修改,双击表格行打开修改模态窗体,通过学生ID查询数据,更新表单字段,保存时再次通过POST提交修改。
摘要由CSDN通过智能技术生成

新增表格数据

要想新增表格数据,要创建一个简单的模态窗体,然后将模态窗体中的数据提交到控制器中,完成一个新增的操作

   想要弹出模态窗体要用的bootstrap中的插件,所以先把bootstrap中的js代码引入到项目中,bootstrap的代码不能在jQuery代码的上面,因为bootstrap的代码对jQuery的代码有依赖;

   点击新增按钮,弹出新增模态窗体

  

   创建一个函数用于提交模态窗体中的数据信息,绑定保存按钮,将页面数据提交到控制器中,完成一个新增的操作

  

   将表单序列化为一个数组

  

   给n赋值为空,使用for循环获取dataArr的数据,用if语句判断信息填写是否完整,信息完整则执行下一步代码,不完整则弹出信息填写不完整

   使用post()方法提交页面数据,post方法的使用结构post(url,提交的数据,回调函数(自己定义的参数)),数据提交成功后,关闭模态窗体并刷新页面

   通过实体类的方法接收传递过来的数据,新增数据的核心代码myModel.SYS_Student.Add(modStudent);myModel.SavaChanges()新增多少行代码就对应多少个数据

模态窗体部分的代码:

<div id="ModInsertStudent" class="modal" tabindex="-1" role="dialog">

             <div class="modal-dialog" role="document">

                <div class="modal-content">

                    <div class="modal-header">

                        <h5 class="modal-title">新增学生</h5>

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                            <span aria-hidden="true">&times;</span>

                        </button>

                    </div>

                    <div class="modal-body">

                        <form id="frm" autocomplete="off">

                            <div class="form-group form-row">

                                <label class="col-form-label col-3 text-right">姓名:</label>

                                <input class="form-control col-7" type="text" name

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值