jquery实现表格的隔行变色
来源：互联网 发布：国产美容仪 知乎 编辑：程序博客网 时间：2024/04/30 14:49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script language="javascript" type="text/javascript" src="../include/jquery.js"></script><script language="javascript" type="text/javascript">$(document).ready(function(){//----------------处理表格的隔行变色---------------var oldcolor="";$("tr").each(function(index,domEle){if(index%2==0){$(domEle).css("background-color","red");}else{$(domEle).css("background-color","yellow");}}).hover(function(){ oldcolor=$(this).css("background-color");//设置新的样式$(this).css("background","#999");},function(){$(this).css("background-color",oldcolor);})})</script></head><body><table width="400" height="200" border="1"> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>手机</td> <td>qq</td> </tr> <tr> <td>一</td> <td>男</td> <td>12</td> <td>13373109323</td> <td>418287613</td> </tr> <tr> <td>二</td> <td>女</td> <td>13</td> <td>15933971909</td> <td> </td> </tr> <tr> <td>三</td> <td>女</td> <td>14</td> <td>15933971909</td> <td> </td> </tr> <tr> <td>四</td> <td>女</td> <td>15</td> <td>15933971909</td> <td>15933971909</td> </tr> <tr> <td>五</td> <td>男</td> <td>23</td> <td>15933971909</td> <td> </td> </tr> <tr> <td>六</td> <td>女</td> <td>23</td> <td>15933971909</td> <td> </td> </tr> <tr> <td>七</td> <td>男</td> <td>21</td> <td>15933971909</td> <td>15933971909</td> </tr> <tr> <td>八</td> <td>女</td> <td>22</td> <td>15933971909</td> <td>15933971909</td> </tr> <tr> <td>九</td> <td>男</td> <td>22</td> <td> </td> <td> </td> </tr></table></body></html>
