在浏览器中对表单数据进行新增，更改，删除

最新推荐文章于 2023-10-23 06:15:00 发布

藜笙

最新推荐文章于 2023-10-23 06:15:00 发布

阅读量1.2k

点赞数

分类专栏： SQL 文章标签： jquery javascript html css bootstrap

本文链接：https://blog.csdn.net/HG13542386794/article/details/117597446

版权

本文介绍如何在浏览器中对HTML表单数据进行新增、更改和删除操作。首先展示了创建表格的HTML结构，包括添加按钮和表头。接着，详细讲解了JavaScript部分，用于实现动态添加和删除数据的功能，以及使用模态窗效果。最后，讨论了控制器的角色，包括获取数据、实例化实体模型、查询、新增、修改和删除学生数据的步骤。

摘要由CSDN通过智能技术生成

这一章，我们来了解一下怎样在浏览器里对表单里的数据进行修改，接上一章内容。

第一步先在视图里面建一个表格来存放数据。

@*表格样式*@
     <div class="container mt-5"> 
        <button class="btn btn-primary" onclick="openInsertModal()">新增</button>
        <button class="btn btn-primary" onclick="deleteStudent()">删除</button>
        <table id="tbStudent" class="table table-bordered mt-3">
           <thead>
               <tr>
                   <th>序号</th>
                   <th>姓名</th>
                   <th>性别</th>
                   <th>身份证号码</th>
                   <th>电话号码</th>
                   <th>地址</th>
               </tr>
           </thead>
            <tbody>
               
            </tbody>
        </table>      
    </div>

上面的代码给它设置了两个按钮和一个表头，还有一个内容为空的 <tbody></tbody>标签。

空的<tbody></tbody>标签，是为动态添加的数据加上表格样式。

建好表格后，开始进行表格的增添操作的学习。

设置好新增和删除按钮后，给它们添加一个模态窗的效果。

HTML 部分：

 @* 新增学生数据的模态窗体 *@
    <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="StudentName" id="txtStudentName" />
                        </div>
                        <div class="form-group form-row">
                            <label class="col-form-label col-3 text-right">性别</label>
                            <select class="form-control col-7" name="StudentSex" id="cboStudentSex">
                                <option value="0">--请选择--</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                        <div class="form-group form-row">
                            <label class="col-form-label col-3 text-right">身份证号码</label>