jquery可编辑表格

 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">&nbsp;</td>
49                 <td bgcolor="#FFFFFF">&nbsp;</td>
50                 <td bgcolor="#FFFFFF">&nbsp;</td>
51                 <td bgcolor="#FFFFFF">&nbsp;</td>
52                 <td bgcolor="#FFFFFF">&nbsp;</td>
53         </tr>
54         <tr>
55                 <td bgcolor="#FFFFFF">&nbsp;</td>
56                 <td bgcolor="#FFFFFF">&nbsp;</td>
57                 <td bgcolor="#FFFFFF">&nbsp;</td>
58                 <td bgcolor="#FFFFFF">&nbsp;</td>
59                 <td bgcolor="#FFFFFF">&nbsp;</td>
60         </tr>
61         <tr>
62                 <td bgcolor="#FFFFFF">&nbsp;</td>
63                 <td bgcolor="#FFFFFF">&nbsp;</td>
64                 <td bgcolor="#FFFFFF">&nbsp;</td>
65                 <td bgcolor="#FFFFFF">&nbsp;</td>
66                 <td bgcolor="#FFFFFF">&nbsp;</td>
67         </tr>
68         <tr>
69                 <td bgcolor="#FFFFFF">&nbsp;</td>
70                 <td bgcolor="#FFFFFF">&nbsp;</td>
71                 <td bgcolor="#FFFFFF">&nbsp;</td>
72                 <td bgcolor="#FFFFFF">&nbsp;</td>
73                 <td bgcolor="#FFFFFF">&nbsp;</td>
74         </tr>
75 </table>
76 </body>
77 </html>

 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 }

posted on 2017-01-18 23:24 Sharpest 阅读(159) 评论(0) 收藏举报