`

jquery实现可编辑的表格

    博客分类：
  • HTML
jQuery table 
阅读更多

今天来演示一个用jquery完成的效果：可编辑的表格。

1.先写一个含有表格的页面jqueryEdit.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jquery示例3:可修改的表格</title>
    <META NAME="Author" CONTENT="King_wangyao">
    <META NAME="Description" CONTENT="jQuery示例：可修改的表格">
    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/jqueryEditUseBlur.js"></script>
</head>
<body>
    <table cellpadding="0" cellspacing="1" border="1" style="width: 60%;">
    <tr>
     <td>用户名：</td>
     <td>King_wangyao</td>
    </tr>
    <tr>
     <td>昵称：</td>
     <td>偽僾訫誶</td>
    </tr>
    <tr>
     <td>自我介绍：</td>
     <td>家穷人丑一米四九，小学文化农村户口，破屋三间薄田一亩，冷锅热灶老婆没有，一年四季药不离口，今日这里广征女友，革命道路并肩携手。</td>
    </tr>
    </table>
</body>
</html>

 

2.书写一个javaScript脚本文件，来完成表格的可编辑效果，jqueryEdit.js:

这个文件中，当输入框修改完后是按回车键提交的，下面一个文件是通过鼠标相对文本框失去焦点来实现提交的，本人认为下面第二种方法比较合乎实际一点。

//在页面加载的时候，让所有的td有一个点击事件
$(document).ready(function(){
    var tdNods = $("td");
    tdNods.click(tdClick);
});

//td点击触发的函数
function tdClick(){
         //1.取出当前td里面的文本内容
         var td = $(this);
         var tdText = td.text();
        //2.清空td里面的文本内容
         td.html(""); //也可以使用td.empty();
        //3.建立一个输入框，也就是input标签
          var input = $("<input>");
        //4.将输入框的内容设为刚才保存的td里面的文本内容
          input.attr("value",tdText);
         //4.5.让文本框能够响应键盘按下的keyup事件，主要是用于处理回车确认
           input.keyup(function(event){
               //1.获取当前用户按下的键值
                  //解决不同浏览器获得事件对象的差异,
                 // IE用自动提供window.event，而其他浏览器必须显示的提供，即在方法参数中加上event
               var myEvent = event || window.event;
               var keyCode = myEvent.keyCode;
               //2.判断是否是回车按下
               if(keyCode == 13){
                   //2.保存当前输入框的内容
                    var input = $(this);
                    var inputText = input.val();//这个地方不能用text(),而是用val()
                   //3.清空td的内容,即去掉输入框
                   var td = input.parent("td");
                   td.empty();
                   //4.将保存的文本内容填充到td中去
                   td.html(inputText);
                   //5.让td重新拥有点击事件
                   td.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");
};

 

下面这个脚本文件是通过鼠标相对文本框失去焦点来实现提交的jqueryEditUseBlur.js:

下面用红色显示的是与上面文件不一样的地方。

//在页面加载时候，就使td节点具有click点击能力
$(document).ready(function(){
    var tdNods = $("td");
    tdNods.click(tdClick);
});

//td的点击事件
function tdClick(){
    //将td的文本内容保存
    var td = $(this);
    var tdText = td.text();
    //将td的内容清空
    td.empty();
    //新建一个输入框
    var input = $("<input>");
    //将保存的文本内容赋值给输入框
    input.attr("value",tdText);
    //将输入框添加到td中
    td.append(input);
    //给输入框注册事件，当失去焦点时就可以将文本保存起来
    input.blur(function(){
        //将输入框的文本保存
        var input = $(this);
        var inputText = input.val();
        //将td的内容，即输入框去掉,然后给td赋值
        var td = input.parent("td");
        td.html(inputText);
        //让td重新拥有点击事件
        td.click(tdClick);

    });
    //将输入框中的文本高亮选中
    //将jquery对象转化为DOM对象
    var inputDom = input.get(0);
    inputDom.select();
    //将td的点击事件移除
    td.unbind("click");
}

 

3.对上面的效果进行进一步的修改，使之更加人性化（红色字体是修改过的地方）

通过修改使你在修改的过程中文本的内容可以按Esc键撤销还原到修改前的状态

//在页面加载时候，就使td节点具有click点击能力
$(document).ready(function(){
    var tdNods = $("td");
    tdNods.click(tdClick);
});

//td的点击事件
function tdClick(){
    //将td的文本内容保存
    var td = $(this);
    var tdText = td.text();
    //将td的内容清空
    td.empty();
    //新建一个输入框
    var input = $("<input>");
    //将保存的文本内容赋值给输入框
    input.attr("value",tdText);
    //将输入框添加到td中
    td.append(input);
    //给输入框注册事件，当失去焦点时就可以将文本保存起来
    input.blur(function(){
        //将输入框的文本保存
        var input = $(this);
        var inputText = input.val();
        //将td的内容，即输入框去掉,然后给td赋值
        var td = input.parent("td");
        td.html(inputText);
        //让td重新拥有点击事件
        td.click(tdClick);

    });
    input.keyup(function(event){
        //1.获取当前用户按下的键值
              //解决不同浏览器获得事件对象的差异,
             // IE用自动提供window.event，而其他浏览器必须显示的提供，即在方法参数中加上event
           var myEvent = event || window.event;
           var keyCode = myEvent.keyCode;
           //2.判断是否是ESC键按下
           if(keyCode == 27){
               //将input输入框的值还原成修改之前的值
               input.val(tdText);
           }
    });
    //将输入框中的文本高亮选中
    //将jquery对象转化为DOM对象
    var inputDom = input.get(0);
    inputDom.select();
    //将td的点击事件移除
    td.unbind("click");
}

分享到：
| 一个Java程序员应该掌握的10项技能
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics