使用Jquery-DataGrid插件实现点击单元格编辑改变其样式。
工具/原料
1
开发工具VSCODE(可以选择自己喜欢的编辑器)
2
准备好的插件包（JQUERY-Easy-UI，官网下载）
3
熟悉网页开发前端开发技能（HTML+CSS+JAVASCRIPT+JQUERY）
方法/步骤
1
首先打开Jquery-Easy-UI官方网站http://www.jeasyui.net/，打开网站后如下图，点击菜单栏Easy-UI下载，如下所示：
2
第二步，下载我们所需要的插件包保存在本地，如下图所示：
4
第四步 创建网页项目demo用于展示开发效果，在本地磁盘目录下创建项目文件夹并创建文件cellediting.html文件如下图所示：部分源码展示
5
第五步 提取源码包中的所需文件，打开Easy-UI解压的文件夹提取如下图所示，从解压包中复制下面的文件到项目文件夹目录，如下图所示：
6Cell Editing in DataGrid - jQuery EasyUI Demo
保存文件并使用谷歌或者其他浏览器打开文件（推荐使用谷歌浏览器）。效果展示如下：点击单元格，并出现项目效果：
第六步，修改项目文件cellediting.html,源码如下，关键代码已经加粗显示：
Cell Editing in DataGrid
Click a cell to start editing.
| Item ID | Product | List Price | Unit Cost | Attribute | Status |
|---|
注意事项
1
如果项目打开没有效果或者错误，需要放到服务器下，启动本地服务才能访问。搭建本地服务在另一篇文章经验中
2
需要掌握基本的前端开发技能，熟悉编程语言
上一篇：苹果AP朋友圈怎么发视频