宝哥软件园

用JQuery实现表格隔行变色和突出显示当前行的代码

编辑:宝哥软件园 来源:互联网 时间:2021-10-11

复制代码代码如下:DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www .w3。org/TR/HTML 4/严格。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML;字符集=iso-8859-1 '标题表格隔行背景和突出显示当前行/title脚本类型=' text/JAVAScript ' src=' http : jquery-1。4 .2 .量滴js /脚本样式类型=' text/CSS '正文{ margin :0 autofont-size :12 px} .data _ list TD { width :100 px }/style脚本类型='text/javascript' /*当鼠标移到表格上是,当前一行背景变色*/$(文档)。ready(function(){ $(')).data _ list tr TD’).mouseover(函数(){ $(this)).父项()。查找(' td ').css(“”背景色,' # d5f 4 Fe ');});}) /* 当鼠标在表格上移动时,离开的那一行背景恢复*/$(文档)。ready(function(){ $(').data _ list tr TD’).鼠标移出(function(){ var bgc=$(this)).父项()。attr(' BG ');$(这个)。父项()。查找(' td ').css(“”背景色,bgc);});}) $(文档)。ready(function(){ var color=' # FFE ab3 ' $(').data _ list tr :奇数TD ').css(“”背景色,颜色);//改变偶数行背景色/* 把背景色保存到属性中*/$('.data_list tr:odd ').attr('bg ',颜色);$('.data_list tr:even ').attr('bg ',' # fff ');})/脚本/头体表类=' data _ list ' trtd 100/TD TD 100/tdtd 100/TD/tr trtd 100/TD TD TD 100/tdtd 100/tdtd 100/TD TD 100/TD/tr trtd 100/TD 100/tdtd 100/tdtd 100/tdtd 100/TD/tr trtd 100/TD TD TD TD TD 100/TD TD TD TD TD 100/TD TD TD TD 100

更多资讯
游戏推荐
更多+