JQuery经典小例子——可编辑的表格

可编辑的表格：

屏幕剪辑的捕获时间: 2015/8/14 9:16

HTML代码为：

<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>JQuery实例二：可编辑的表格</title>
    <link href="Edit.css"rel="stylesheet" />
   
    <scriptsrc="jquery.js"></script>
    <scriptsrc="edit.js"></script>
</head>
<body>
    <table >
        <thead >
            <tr >
                <thcolspan="2">鼠标点击表格项就可以编辑</th>
            </tr>             
        </thead>
        <tbody >
            <tr>
                <th>学号</th>
                <th>姓名</th>
            </tr>
            <tr>
                <td>0001</td>
                <td>张三</td>
            </tr>
            <tr>
                <td>0002</td>
                <td>李四</td>
            </tr>
            <tr>
                <td>0003</td>
                <td>王五</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>赵六</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS代码为：

body {  
}
table{/*标签选择器*/
    border:1px solid black;
    border-collapse:collapse ;/*使边框之间没有空隙*/
    400px;
}
table td{
    border:1px solid black;
    50%;
}
table th{
    border:1px solid black;
    50%;
}
tbody th{
    background-color :#A3BAE9;
 
}

JS文件：

//首先需要通过JS来解决内容部分奇偶行的背景色不同
//$(document).ready(function () {
 
//});
$(function(){
    //找到表格内容中除了第一个tr外所有的奇数行
    $("tbody tr:even").css("background-color","#ECE9D8");
 
    //需要找到所有的学号单元格
    var numTd=$("tbody td:even");
    //给这些单元格注册鼠标点击事件
    //numTd.click(function(){
    //    //创建一个文本框
    //    var inputObj = $("<input type='text'>");
    //    //去掉文本框的边框
    //    inputObj.css("border-width","0");
    //    //设置文本框汇总给的文字字体大小是16px；
    //    inputObj.css("font-size", "16px");
 
    //    //找到当前鼠标点击的td,this 对应的就是响应click的那个td
    //    var tdObj = $(this);
    //    //使文本框的宽度和td的宽度相同
    //    inputObj.width(tdObj.width());
    //    //设置文本框的背景色
    //    inputObj.css("background-color", tdObj.css("background-color"));
 
    //    //将当前td中的内容放到文本框中
    //    inputObj.val(tdObj.html());
 
    //    //清空td中的内容
    //    tdObj.html("");
    //    //将文本框插入td中
    //    inputObj.appendTo(tdObj);
 
 
 
 
 
 
    //另外一种精简的写法
    numTd.click(function () {
 
        //找到当前鼠标低级的td，this对应的就是这个td
        var tdObj = $(this);
        if (tdObj.child("input").length > 0) {
            //如果鼠标点击的是td中的input，不执行click处理
            return false;
        }
        var text=tdObj.html();
        //清空td中的内容
        tdObj.html("");
        //创建一个文本，去掉文本框的边框
        //设置文本框中的文字字体大小为16px；
        //使文本框的宽度和td的宽度相同
        //设置文本框的背景色
        //将td中的内容放到文本框中
        //将文本框插入到td中
        var inputObj=$("<input type='text'>").css("border-width","0")
                      .css("font-size","16px")
                      .width(tdObj.width())
                      .css("background-color",tdObj.css("background-color"))
                      .val(text).appendTo(tdObj);
        //使文本框插入之后就会被选中
        inputObj.trigger("focus").trigger("select");
        inputObj.click(function () {
            return false;
        });
 
 
        //处理文本框的回车和ESC按键确认操作
        inputObj.keyup(function (event) {
            //获取键值
            var keycode = event.which;
            //处理回车的情况
            if (keycode == 13) {
                //获取当前文本框中的内容
                var inputtext = $(this).val();
                //将td的内容修改成文本框中的内容
                tdObj.html(inputtext);
            }
            //处理ESC的情况
            if (keycode == 27) {
 
            }
        });
    });
});

知识点小结：

1、$(function(){})是$(document).ready(function(){})的简化写法

2、$("tbodytr")可以返回tbody中的所有tr节点

3、$("tbodytr:even")可以返回tbody中所有索引值是偶数的tr节点。

4、CSS方法可以用于设定或获取节点的CSS属性。

5、JQuery的对象包含着选择器对应的DOM节点，以数组形式保存。

6、get方法可以获得JQuery对象中包含的某个DOM节点。

7、$()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成JQuery对象。

8、children方法可以获得某个节点的子节点，可以指定参数来限制子节点的内容

9、appendTo方法可以将一个节点追加到另一个节点的所有子节点的后面。

10、trigger方法可以出发某个JS的事件发生。

总结：

学到的知识，必须要用一下，纸上得来终觉浅（视频也不行），绝知此事要躬行！