1.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>џíҭٱ</title> 6 <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 7 <script type="text/javascript" src="main.js"></script> 8 <link href="main.css" rel="stylesheet" type="text/css" /> 9 </head> 10 <body> 11 <table border="0" cellpadding="0" cellspacing="1" bgcolor="#B3D9FF" id="zebraTable"> 12 <tr> 13 <td bgcolor="#FFFFFF">11</td> 14 <td bgcolor="#FFFFFF">12</td> 15 <td bgcolor="#FFFFFF">13</td> 16 <td bgcolor="#FFFFFF">14</td> 17 <td bgcolor="#FFFFFF">15</td> 18 </tr> 19 <tr> 20 <td bgcolor="#FFFFFF">21</td> 21 <td bgcolor="#FFFFFF">22</td> 22 <td bgcolor="#FFFFFF">23</td> 23 <td bgcolor="#FFFFFF">24</td> 24 <td bgcolor="#FFFFFF">25</td> 25 </tr> 26 <tr> 27 <td bgcolor="#FFFFFF">31</td> 28 <td bgcolor="#FFFFFF">32</td> 29 <td bgcolor="#FFFFFF">33</td> 30 <td bgcolor="#FFFFFF">34</td> 31 <td bgcolor="#FFFFFF">35</td> 32 </tr> 33 <tr> 34 <td bgcolor="#FFFFFF">41</td> 35 <td bgcolor="#FFFFFF">42</td> 36 <td bgcolor="#FFFFFF">43</td> 37 <td bgcolor="#FFFFFF">44</td> 38 <td bgcolor="#FFFFFF">45</td> 39 </tr> 40 <tr> 41 <td bgcolor="#FFFFFF">51</td> 42 <td bgcolor="#FFFFFF">52</td> 43 <td bgcolor="#FFFFFF">53</td> 44 <td bgcolor="#FFFFFF">54</td> 45 <td bgcolor="#FFFFFF">55</td> 46 </tr> 47 <tr> 48 <td bgcolor="#FFFFFF"> </td> 49 <td bgcolor="#FFFFFF"> </td> 50 <td bgcolor="#FFFFFF"> </td> 51 <td bgcolor="#FFFFFF"> </td> 52 <td bgcolor="#FFFFFF"> </td> 53 </tr> 54 <tr> 55 <td bgcolor="#FFFFFF"> </td> 56 <td bgcolor="#FFFFFF"> </td> 57 <td bgcolor="#FFFFFF"> </td> 58 <td bgcolor="#FFFFFF"> </td> 59 <td bgcolor="#FFFFFF"> </td> 60 </tr> 61 <tr> 62 <td bgcolor="#FFFFFF"> </td> 63 <td bgcolor="#FFFFFF"> </td> 64 <td bgcolor="#FFFFFF"> </td> 65 <td bgcolor="#FFFFFF"> </td> 66 <td bgcolor="#FFFFFF"> </td> 67 </tr> 68 <tr> 69 <td bgcolor="#FFFFFF"> </td> 70 <td bgcolor="#FFFFFF"> </td> 71 <td bgcolor="#FFFFFF"> </td> 72 <td bgcolor="#FFFFFF"> </td> 73 <td bgcolor="#FFFFFF"> </td> 74 </tr> 75 </table> 76 </body> 77 </html>
2.
1 //初始化文档 2 $(document).ready( 3 function () { 4 PageLoad(); 5 } 6 ); 7 8 //文档加载完成时执行 9 function PageLoad() { 10 //表格背景交替换色 11 $("#zebraTable").find("tr").each( 12 function(i){ 13 if(((i+1) % 2) == 1) { 14 $(this).find("td").addClass("trBg"); 15 } 16 $(this).hover( 17 function() { 18 $(this).find("td").addClass("trHover"); 19 }, 20 function() { 21 $(this).find("td").removeClass("trHover"); 22 } 23 ) 24 } 25 ); 26 //单元格可编辑 27 $("#zebraTable").find("td").click( //click为单击时可编辑,dblclick为双击时可编辑 28 function() { 29 if($(this).text() != "") { 30 $(this).html("<input type='text' name='editInput' id='editInput' value='" + $(this).text() + "' />"); 31 $(this).find("input").focus();//当输入框获得焦点 32 $(this).find("input").select(); 33 $(this).find("input").blur( 34 function() { 35 $(this).parent("td").html($(this).val()); 36 } 37 ); 38 } 39 } 40 ); 41 }