使用JavaScriptjQuery实现页面特效第九章-实践.pptVIP

（2）当单击“删除确认提示框”的“确认”按钮后，才能删除其选中的行数据，并实现数据的联动，如下图： 任务二：删除多行团购项目 （1）在cart.html页面中，在订单表最后一行，添加“删除”按钮。参考代码如下： 任务二：删除多行团购项目 … tr td colspan=7 class=cal p style=float:left; padding:0px 26px input type=button class=btn1 value=删除 id=btnDelMul//p 已选span id=spanItemCount2/span件商品 应付总额： span id=spanTotal￥42.9/span /td /tr … （2）在script/script脚本标签中，声明全局变量isMulDel，标示当单击“删除确认提示框”的“确定”按钮后，是删除单行还是删除选中的多行数据。 （3）在文档加载完成事件中，给最后一行的“删除”按钮绑定单击事件方法，实现遮罩层和“删除确认提示框”的显示，并给变量isMulDel赋值为true。 （4）在script/script脚本标签中，创建函数DelMulItems()，封装从订单表中删除选中多行的功能。参考代码框架如下： 任务二：删除多行团购项目 任务二：删除多行团购项目 //删除选中行的团购项目 function DelMulItems(){ var delCount;//保存订单表中被选中的复选框的数量但不包括实现全选的复选框 var $cbObjs;//保存订单表中被选中的复选框对象但不包括实现全选的复选框 $cbObjs=$(table#tabOrder tr td input[type=checkbox]:checked:not(#allCb)); //保存除了“全选”以外的复选框的数量 … if(delCount!=0){//如果有选中要删除的项目 … });} } （5）在文档加载完成事件中，给“删除确认提示框”中的“确定”按钮单击事件绑定方法，根据全局变量isMulDel，决定是删除单行的团购项目还是删除选中行的团购项目。删除后，重新计算、显示团购总价和总项目数量，同时关闭提示框和遮罩层，页面恢复正常的功能。参考代码如下： 任务二：删除多行团购项目 //单击提示框的确定按钮 $(#btnSure).click(function(){ if(!isMulDel){ //把删除按钮所在的行从表格中删除 … }else{ //删除选中的行 … } //重新计算、显示删除后的总价 //重新计算、显示删除后的团购项目数量 //提示框关闭 //遮罩层关闭 }); End 谢谢观看 * 实践九 jQuery事件 实践目标 从订单表中，删除单行项目 从订单表中，删除多行项目 利用jQuery事件和方法，从订单表中删除单行团购项目。 （1）在页面中添加订单表，页面加载完毕后，初始效果如下图： 任务一：删除单行团购项目 （2）单击每一行的“删除”链接后，整个页面内容将被背景颜色是灰色、透明度是50%的遮罩层覆盖，并弹出“确认删除提示框”，要求提示框显示的位置不随滚动条的移动而移动，距离窗口左端始终500px，距离窗口上端始终100px。单击编号是“1001”项目所在行的“删除”链接后的效果如下图： 任务一：删除单行团购项目 （3）单击提示框的“关闭”文本，提示框和遮罩层关闭。 （4）单击提示框的“确认”按钮，从订单表中删除此行，且关闭提示框和遮罩层，效果如下图： 任务一：删除单行团购项目 （1）新建html页面，用div创建各个版块，用css设置样式。 （2）在静态页面中导入jQuery框架后，添加脚本代码。 （3）在脚本中创建showMask()，设置遮罩层的大小并显示。 任务一：删除单行团购项目 任务一：删除单行团购项目 #mask { /*遮罩层CSS*/ background-color:gray; left:0; position:absolute; top:0; z-index:100; filter:alpha(opacity=30); opacity:0.3; } 任务一：删除单行团购项目 function showMask() { //获取页面内容的高度 var bh = $(body).h