jquery入门—数据删除与隔行变色以及图片预览

1、功能需求：表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览2、示例代码如下：复制代码代码如下：' DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN ' HTML HEAD TITLE数据管理/TITLE META NAME=' Generator ' CONTENT=' EditPlus ' META NAME=' Author ' CONTENT=' META NAME=' Keywords ' CONTENT=' META NAME=' Description ' CONTENT='脚本语言=' JavaScript ' type=' text/JavaScript ' src=' http : jquery-1。8 .3 .量滴js '/script style=' text/CSS ' body { font-size :12 px } table { width :360 px；边框-折叠：折叠}表格tr th，TD { border : solid 1px # 666 text-align : center }表格tr TD img { border : solid 1px # CCC；padding:3px宽度：42 px高度：60 px光标：hand}表tr TD span { float : leftadd-left :12 px }表格tr th {底色： # CCC高度：32px} .clsImg { position : absoluteborder : solid 1px # cccpadding :3 px宽度：85 px高度：120 px背景色： # eeedisplay:none} .btn{border:#666 1px固体；padding:2px宽度：50 pxfilter : progiddximagettransform .微软。渐变(渐变类型=0，StartColorStr=# ffffff，endcolorst=# ECE9DB)；}/样式脚本类型=' text/JavaScript ' $(function(){/* *)隔行变色* */$”(表tr : th-child(奇数)")。css(“”背景色，' # eee ')；/**全选复选框单击事件**/$('#chkAll ').单击(function(){ if(this。选中){ $(“表tr TD输入[类型=复选框]”).attr('checked '，true)；} else { $(' table tr TD输入[type=checkbox]').attr('checked '，false)；} });/**删除按钮单击事件**/$('#btnDel ').单击(function(){ var IntL=$(' table tr TD输入t :未选中：(' # CHkall ')')).长度；if(intL！=0){ $(' table tr TD输入[type=checkbox]: not(' chkAll ')').每个（函数（索引){如果(这个。选中){ $(' table tr[id=' this。值']').移除();} });} });/**小图片鼠标移动事件* */var x=5；var y=15$("表tr td img ").鼠标移动(函数(e){ $('#imgTip ').attr('src '，this.src).css({'top':(e.pageY y) 'px '，' left':(e.pageX x) 'px'}).秀场(3000);});/**小图片鼠标移出事件**/$(“表tr td img”).mouseout(function(){ $('#imgTip ')).hide()；});});/脚本头部/身体表tr th选项/th编号/th封面/th购书人/th性别/th购书价/th/tr tr id=' 0 ' t input id=' CheckBox 1 ' type=' CheckBox ' value=' 0 '/TD TD TD 1001/TD tdimg src=' http : IMages/img 03。jpg ' alt=' '/TD刘明明运输署/运输署女TD/TD 37.80元/TD/tr tr id=' 1 ' t input id=' CheckBox 2 ' type=' CheckBox ' value=' 1 '/TD TD TD 1002/TD tdimg src=' http : IMages/img 04。jpg ' alt=' '/TD李小明运输署/运输署男TD/TD 35.60元/TD/tr tr id=' 2 ' t input id=' CheckBox 3 ' type=' CheckBox ' value=' 2 '/TD TD TD 1003/TD tdimg src=' http : IMages/img 08。jpg ' alt=' '/TD张小星运输署/运输署女TD/TD 45.60元/TD/tr/table table tr TD style=' text-align : left；高度：28像素输入id='chkAll' type='checkbox'/全选/span跨度输入id='btnDel' type='button' value='删除class=' BTN '/span/TD/tr/table img id=' IMgTip ' class=' Clsimg ' src=' http : IMages/IMg 03。gif '/BOdy/HTML 3，效果图预览