编辑表格数据

开发工具与关键技术：MVC、SQL Server
作者：邓李庆
撰写时间：2019年03月28日

下面给你们介绍一下表格怎么编辑，首先在视图层创建一个table表格，在table标签添加一个ID为“Academe3”可以随便命名。在th标签中添加鼠标手指样式“cursor:pointer”见如下代码图1：

图1

然后在script的标签中添加一个事件，获取编辑表格中参数的ID。items下拉列表中的项目的列表。鼠标右键将会弹出一个模态框在text可以添加所需要的文字，onclick事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发onclick事件。Modal事件在模态窗口中打开会弹出新窗口。Toggle弹出模态框达到一个动画效果。Empty（）方法删除被选元素的子元素。见如下代码图2：

浏览器加载的页面

图2

用Check获取到打开的新窗口的表单ID ， checked属性默认是 false已改变后，立即向服务器回传表单。 在if语句只有当指定条件长度为时，该语句才会执行里面代码。否则执行else。Check的值等于或大于1的时候执行里面数据进行for循环获取每一条选择的数据将回填到table的对应标签里。
在tr标签里都是自己编辑的，tb标签中添加contenteditable表格便可以编辑，属性默认的为false的。可以在tb标签中添加select、input等都可以编辑。下拉框需要回填数据要添加appendOption();见代码图3：

图3

用post提交将参数提交到控件器进行查询数据库中的数据，如参数相同将返回数据给视图层。见代码图4：

图4

接受到的数据（date）将查询出每一条数据每一个参数都要对应，不然回填不上数据。回填完关闭模态框。如代码图5：

图5

回填完后的数据将如图一样。点击表格中的td可以进行编辑

浏览器加载的页面