jQ学习之实现表格的隔行换色
一：运用之前博客中提到的基础知识，然后具体操作在注释里了，比较简单直接上代码
html:
1 <table border="1px solid red" cellspacing="0px" id="tbl" align="center" style="text-align: center;"> 2 <tbody> 3 <tr> 4 <td> 5 姓名 6 </td> 7 8 <td> 9 <span style="color: red;"> 10 * 11 </span> 12 <input type="text" name="userName" id="userName" onfocus="of('userName')" onblur="ob()" required="required" /> 13 <span id="userNameSpan" style="color: gray; display: none;"> 14 </span> 15 </td> 16 </tr> 17 18 <tr> 19 <td> 20 年龄 21 </td> 22 23 <td> 24 <span style="color: red;"> 25 * 26 </span> 27 <input type="text" name="age" id="age" onfocus="of('age')" onblur="ob()" required="required" /> 28 <span id="ageSpan" style="color: gray; display: none;"> 29 30 </span> 31 </td> 32 </tr> 33 <tr> 34 <td> 35 账号 36 </td> 37 38 <td> 39 <span style="color: red;"> 40 * 41 </span> 42 <input type="text" name="userNumber" id="userNumber" /> 43 <span id="userNumberSpan"> 44 45 </span> 46 </td> 47 </tr> 48 <tr> 49 <td> 50 密码 51 </td> 52 53 <td> 54 <span style="color: red;"> 55 * 56 </span> 57 <input type="password" name="password" id="password" /> 58 <span id="passwordSpan"> 59 60 </span> 61 </td> 62 </tr> 63 <tr> 64 <td> 65 再次输入密码 66 </td> 67 68 <td> 69 <span style="color: red;"> 70 * 71 </span> 72 <input type="password" name="repassword" id="repassword" /> 73 <span id="repasswordSpan"> 74 75 </span> 76 </td> 77 </tr> 78 <tr> 79 <td colspan="2"> 80 <input type="button" value="点我换色" id="changeColor" /> 81 </td> 82 </tr> 83 </tbody> 84 85 </table>
jQ代码：
$(function(){ $("#changeColor").click(function(){ //一般采用美工写的css代码，先link然后用addclass方法调用 $("tbody tr:even").css("backgroundColor","gold"); $("tbody tr:odd").css("backgroundColor","pink"); }) })
