js 点击文字可编辑 离开保存 jQuery

最近工作中有这么个需求。
点击文字可编辑，离开保存，于是研究了下。代码如下
html
 
<!DOCTYPE html> 
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
    <title>可以编辑的表格</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
    </head>  
<body>  
    <!--一个简单的表格，一行两列，我们让表格里的数据点击后可以修改-->  
    <table >  
        <tbody>  
      <tr>  
        <td>123321</td>  
        <td>123456</td>  
        </tr>  
        </tbody>  
    </table>  
</body>  
</html>

JS

//在页面装载是让所有的td都拥有一个点击事件  
$(document).ready(function(){  
  //找到所有的td节点  
    var tds = $("td");  
    //给所有的td节点增加点击事件  
    tds.click(tdclick);  
});  
  
//td的点击事件  
function tdclick(){  
    //保存当前的td节点  
    var td = $(this);  
      //1.取出当前td中的文本内容保存起来  
    var text = td.text();  
       //2.清空td中的文本内容  
    //第一种  
    td.html("");  
    //第二种  
    //td.empty();  
    //3.建立一个文本框 也就是input的元素节点 (没有尖括号时候是找,有尖括号时是创建)  
    var input = $("<input>");  
  
    //4.设置文本框的值是保存起来的文本内容  
    input.attr("value", text);  
    //4.5 让文本框能够响应键盘按下的事件  
    input.blur(function(event) {  
        var cfm = confirm("是否确认修改");  
          
        if(cfm){  
        //0 获取当前用户点击空白处时  
        //解决不同的浏览器获取时间的对象的差异  
        //var myEvent = event || window.event;  
        //var kcode = myEvent.keyCode;  
         //1 判断是否是回车按下  
        //if (kcode == 13)  
        //{  
        //var inputnode = $(this);  
  
        //2.获取当前文本框的内容  
        //var inputtext = inputnode.val();  
            var inputtext = input.val();  
        //3.清空td里面的内容  
        //var tdNode = inputnode.parent();  
            var tdNode = input.parent(); //拿到td节点  
        //4.将保存的文本框的内容填充到td中  
            tdNode.html(inputtext);  
        //5.让td重新拥有点击事件  
            tdNode.click(tdclick);  
        //}  
        }  
    });  
//    input.keyup(function(event) {  
//        //0 获取当前用户按下的键值  
//        //解决不同的浏览器获取时间的对象的差异  
//        var myEvent = event || window.event;  
//        var kcode = myEvent.keyCode;  
//         //1 判断是否是回车按下  
//        if (kcode == 13)  
//        {  
//        //var inputnode = $(this);  
//  
//        //2.获取当前文本框的内容  
//        //var inputtext = inputnode.val();  
//            var inputtext = input.val();  
//        //3.清空td里面的内容  
//        //var tdNode = inputnode.parent();  
//            var tdNode = input.parent(); //拿到td节点  
//        //4.将保存的文本框的内容填充到td中  
//            tdNode.html(inputtext);  
//        //5.让td重新拥有点击事件  
//            tdNode.click(tdclick);  
//        }  
//  
//    });  
  
       //5.把文本框加到td中去  
    td.append(input);//也可以用input.appendTo(td);  
  
    //5.5让文本狂中的文字被高亮选中  
    //需要将jquery的对象转换为dom对象  
    var inputdom = input.get(0);  
    inputdom.select();  
    //6.清除td上注册的点击事件  
    td.unbind("click");  
}

为了好看，css

table,td{  
    border-collapse:collapse;/*让相邻的边框合并*/  
    border:1px solid black;/*边框1个像素*/  
}

大家可以试试！

 
posted @ 2012-07-20 15:38  亡魂  阅读(5985)  评论(1)  编辑  收藏  举报
返回顶部