表格的编辑

<div align="center">

             <h1>显示员工的界面</h1>

                   <tablecellpadding="0" cellspacing="0">

                            <thead>

                                     <tr>

                                               <thwidth="5%"><input type="checkbox"name="chk"></th>

                                               <thwidth="10%"> 序号 </th>

                                               <thwidth="10%"> 姓名 </th>

                                               <thwidth="10%"> 性别 </th>

                                               <thwidth="10%"> 年龄 </th>

                                               <thwidth="20%"> 出生日期 </th>

                                               <thwidth="15%"> 薪资</th>

                                               <thwidth="20%"> 部门 </th>

                                     </tr>

                            </thead>

                            <tbodyalign="center">

                                     <tr>

                                               <th><inputtype="checkbox" name="chk"></th>

                                               <th>1 </th>

                                               <td>小小 </td>

                                               <td>女 </td>

                                               <td>25 </td>

                                               <td>1987-12-12 </td>

                                               <td>6453</td>

                                               <td>河软 </td>

                                     </tr>

                                     <tr>

                                               <th><inputtype="checkbox" name="chk"></th>

                                               <th>2 </th>

                                               <td>小天 </td>

                                               <td>女 </td>

                                               <td>25 </td>

                                               <td>1987-12-12 </td>

                                               <td>6453</td>

                                               <td>河软 </td>

                                     </tr>

                                     <tr>

                                               <th><inputtype="checkbox" name="chk"></th>

                                               <th>3 </th>

                                               <td>小蓝 </td>

                                               <td>女 </td>

                                               <td>25 </td>

                                               <td>1987-12-12 </td>

                                               <td>6453</td>

                                               <td>河软 </td>

                                     </tr>

                            </tbody>

                   </table>

         </div>

实现可编辑表格的原理：

当点击tbody中的td时能够把td中的内容替换成一个<inputtype="text">进行修改

点击enter能够提交数据     点击esc键时撤销操作

 

//首先实现隔行变色的效果

//首先获取tbody下面的所有tr  然后采用:even 选择出奇数行的所有td    even实际返回的是偶数

                   $("tbody>tr:even").css("background-color","deepskyblue");

                   //与:even相反

                   $("tbody>tr:odd").css("background-color","orange");

                  

                   //注册事件

                   $("tbody>trtd").click(function(){

                            //获取当前点击的td    直接获取出来的是dom对象，所有要加一个$

                            var$td=$(this);

                           

                            //判断当前的td对象是否已经含有input

                            if($td.children("input").length>0){

                                     //直接返回

                                     returnfalse;

                            }

                           

                            //获取当前td的文本值

                            vartdText=$td.text();

                           

                            //文本清空

                            $td.html("");

                           

                            //创建需要的inputtype="text"

                            var$input=$("<input type='text'>");

                           

                            //设置属性

                            $input.css("width",$td.width());

                           

                            $input.val(tdText);

                           

                            //把创建的input添加到td中

                            $td.append($input);

                           

                            //给input注册事件,keyup触发键盘事件    

                            $input.keyup(function(event){

                                     //获取按住的是哪个键

                                     varkey=event.which;

                                     //回车

                                     if(key == 13) {

                                               //获取当前的value

                                               varvalue=$input.val();

                                               //value添加到td中

                                               $td.html(value);

                                     }elseif(key==27){

                                               $input.val(tdText);

                                     }

                            });

                   });