2.1.6 实验步骤
任务1实验分解
（1） 打开HBuilderX 进入开发界面，选择“文件新建
项目”菜单，进入新建项目界面。选择普通项目，输入项目名称“Jquery Table Operation”，并选择空项目，点击创建按钮。
（2） 在项目窗口Jquery able Operation上，右键选择“新建
html文件”，输入文件名称“task1”，点击创建按钮。
（3） 在新建文件下，写入如下基础代码。
效果如图2.5所示。
图2.5
（4） 在实验资料与素材中找到jquery-3.3.1.min.js文件，选中文件复制，并粘贴到项目中，如图2.6所示。
图2.6
（5） 在页面的＜head＞标签末尾加上jQuery 的引入代码。
（6） 利用jQuery 选择表格中数据的所有2、4、5……行，并加上颜色#f6faff，如图2.7所示。
图2.7
代码如下：
（7） 利用jQuery 选择表格中数据的所有1、3、5....行，并加上颜色#f9e9ff，如图2.8所示。
图2.8
新加代码如下：
至此完成任务1的所有功能要求。
任务2实验分解
（1） 在项目窗口JqueryTableOperation上，右键选择“新建
html文件”，输入文件名称task2，点击创建按钮。
（2） 打开task1.html将task1.html所有内容复制，粘贴到task2.html（任务2后面所有操作都在task2.html中完成）。
完成后的项目结构如图2.9所示。
图2.9
（3） 在页面加入如下代码实现全选与取消全选。
其中：
（4） 在页面加入如下代码实现每行选中与取消选中。
其中：
（5） task2的代码如下：
注意，此处有“废代码”存在。由于取消全选中回复隔行变色代码：
使用的是模拟点击click（）事件。会调用下面每行取消选中事件的恢复隔行变色代码：
所以可注释掉冗余代码：
优化后代码如下：
至此完成任务2所有要求。
任务3实验分解
（1） 在项目窗口JqueryTableOperation上右键新建>html文件，输入文件名称task3，点击创建按钮。
（2） 打开task12.html将task2.html所有内容复制，粘贴到task3.html（任务3后面所有操作都在task3.html中完成）。
完成后的项目结构如图2.10所示。
图2.10
（3） 加入以下代码，给所有的隐藏按钮绑定事件，添加隐藏行的功能。
至此完成任务3所有要求。