扶凯 » JQuery应用实例:可以编辑的表格

JQuery应用实例:可以编辑的表格

十 23rd, 2008

转载本站文章请注明，转载自：扶凯[http://www.php-oa.com]

本文链接: http://www.php-oa.com/2008/10/23/jquerytdclick.html

最简单的一个表格用来测试.

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8">
 
    <title>JQuery应用实例:可以编辑的表格</title>
    <link type="text/css" rel="stylesheet" href="css.css">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jqueryedit.js"></script>
<style type="text/css">
<!--
table,td {
    border-collapse:collapse;
    border: 1px solid black;
}
-->
</style>
</head>
<body>
    <table>
        <tbody>
        <tr>
            <td>5678</td>
            <td>1234</td>
        </tr>
        </tbody>
    </table>
</body>
</html>
 
下面是我引入的jqueryedit.js的js文件.
 
//在网页加载时,让所有的td有一个点击的事件
$(document).ready(function(){
    var tds= $("td");
    tds.click(function(){
       //0.保存当前的td节点
        var td =$(this);
       //1.取出当前td中的文本内容保存起来
        var text = td.text();
       //2.清空td中的所有的内容
        td.html("");//也可以使用td.empty();
       //3.建一个input的文本框标签.
        var input = $("<input>");
       //4.设置文本框的值是保存起来的文本内空
        input.attr("varlue",text);
       //4.5文本框可以响应键盘按下的事件.主要用于回车确认
        input.keyup(function(event){
            //0.获取当前用户按下的键值
            //解决不同浏览器事件对象的差异
            var myEvent = event || window.event;
            var kcode = myEvent.keyCode;
            //1.比较是否是回车键.
            if(kcode == 13){
                var inputnode = $(this);
                //2.得到保存当前文本框的内容
                var intputext = inputnode.val();
                //3.清空td中的内容
                var tdNode = inputnode.parent();
                //4.装保存的内容放到td标签中.
                tdNode.html(intputext);
                //5.让td重新有点击事件.
                tdNode.click(tdclick);   
            }
 
        });
           //5.装文本框加入到td中.
        td.append(input); //也可以使用input,appendTo(td)
        //5.5让文本框中的文字高亮.如下使用get可以得到dom对象.这也是jqueryedit变成javascript的方法 .
            var inputdom = input.get(0);
            inputdom.select();
           //6.不在响应onclick.清除td上的点击事件.
        td.unbind("tdclick")
 
    });
});
 
function tdclick(){
      //0.保存当前的td节点
        var td =$(this);
       //1.取出当前td中的文本内容保存起来
        var text = td.text();
       //2.清空td中的所有的内容
        td.html("");//也可以使用td.empty();
       //3.建一个input的文本框标签.
        var input = $("<input>");
       //4.设置文本框的值是保存起来的文本内空
        input.attr("varlue",text);
       //4.5文本框可以响应键盘按下的事件.主要用于回车确认
        input.keyup(function(event){
            //0.获取当前用户按下的键值
            //解决不同浏览器事件对象的差异
            var myEvent = event || window.event;
            var kcode = myEvent.keyCode;
            //1.比较是否是回车键.
            if(kcode == 13){
                var inputnode = $(this);
                //2.得到保存当前文本框的内容
                var intputext = inputnode.val();
                //3.清空td中的内容
                var tdNode = inputnode.parent();
                //4.装保存的内容放到td标签中.
                tdNode.html(intputext);
                //5.让td重新有点击事件.
                tdNode.click(tdclick);   
            }
        });
           //5.装文本框加入到td中.
        td.append(input); //也可以使用input,appendTo(td)
        //5.5让文本框中的文字高亮.如下使用get可以得到dom对象.这也是jqueryedit变成javascript的方法 .
            var inputdom = input.get(0);
            inputdom.select();
           //6.不在响应onclick.清除td上的点击事件.
        td.unbind("click")
}