JQuery实战--能够编辑的表格

　　今天学习到了一个实例，其名称为的能够编辑的表格。

事实上现的效果是：点击页面上的单元格，单元格中的内容变成选中状态，变成能够输入的状态。向单元格中输入内容，按下回车。单元格保存其改动后的结果，按ESC，单元格的内容还原成原来的内容。

其原理是：点击单元格的时候。在单元格内加入一个文本框，其大小充满整个单元格，其内容为单元格中的内容，改动后的内容又一次赋给单元格。

　　HTML代码：

    
                   鼠标点击表格就能够编辑
                
            


学号
                
姓名
            

0001
                
张三
            

0002
                
李四
            

0003
                
王五
            

0004
                
赵六
            

body {
}
table{
    border:1px solid black;
    /*修正单元格边框合并的问题*/
    border-collapse:collapse;
    width:400px;
}
table td{
    border:1px solid black;
    width:50%;
}
table th{
    border:1px solid black;
    width:50%;
}
tbody th{
    background-color:blue;
}

//解决奇偶行的背景色不一样
//$(document).ready(function () {

//});


//简化的ready写法
$(function () {
    //找到表格的内容区域中除了第一个tr外的全部奇数行
    //使用even是为了把tbody tr 返回的全部tr元素中，在数组里面下标是偶数的元素返回，由于这些元素，实际上才是我们期望的奇数行。奇数行（odd）
    $("tbody tr:even").css("background-color", "#999");

    //找到全部的学号的单元格
    //$("tbody td:even").css("background-color", "red");
    var numTd = $("tbody td:even");
    //给这些单元格注冊鼠标点击的事件
    numTd.click(function () {



        //找到当前鼠标点击的td，this相应的就是响应了click的那个td
        var tdobj = $(this);

        if (tdobj.children("input").length > 0) {
            //当前td中的input。不运行click处理
            return false;
        }

        var text = tdobj.html();
        //创建一个文本框
        //去掉文本框的边框
        //设置文本框中的文字的大小
        //使文本框的宽度与td宽度同样
        //设置文本框的背景色
        //须要将当前td中的内容放到文本框中
        var inputobj = $("").css("border-width", "0").css("font-size", "16px").width(tdobj.width()).css("background-color", tdobj.css("background-color")).val(text);
        //清空td中的内容
        tdobj.html("");
        //将文本库插入到td中
        inputobj.appendTo(tdobj);
        //文本框插入后就选中
        inputobj.trigger("focus").trigger("select");
        inputobj.get(0).select();
        inputobj.click(function () {
            return false;
        });
        //处理文本框上的回车和ESC按键的操作
        inputobj.keyup(function (event) {
            //获取键值
            var keycode = event.which;
            //处理回车的情况
            if (keycode == 13) {
                //获取当前文本框的内容
                var inputtext = inputobj.val();
                tdobj.html(inputtext);
            }
            if (keycode == 27) {
                tdobj.html(text);
            }
        });
    });
});

1. HTML总结：
   1. table中能够包括thead和tbody
   2. 表头的内容能够放在th中
2. CSS总结：
   1. 能够通过border-collaspse:collapse 这样的方式来使表格中的单元格的边框合并。
   2. 当th上有背景色时，这个th属于tr上定义的背景色会无效。
3. JQuery总结：
   1. $(function(){})是$(document).ready(function(){})的简化写法。
   2. $("tbody tr:even")能够返回tbody中全部索引值为偶数的tr节点（：odd  是为奇数的tr节点）。

   3. function中的this代表运行这个function的对象
   4. children方法能够获得某个节点的子节点。能够制定參数来限制子节点的内容
   5. html方法能够设置或获取节点的HTML内容
   6. val方法能够获取或设置节点的value值
   7. appendTo方法能够将一个节点追加到还有一个节点全部子节点的后面
   8. trigger方法能够触发某个Javascript的事件发生
   9. Jquery中某个方法的參数function上能够定义一个event的參数，Jquery会屏蔽浏览器的event差异，传给我们一个可用的event对象
   10. Jquery的event对象上有一个which的属性，能够获得键盘按键的键值（13=回车，27=ESC）

　　仅仅有通过不断地实践，不断的总结，编制知识网。和学过的知识联系起来，那么我们的收获才是巨大的。