JQuery实现可编辑的表格

醉倚西风 · 发表于 2011-8-26 10:41

edit.html:
Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>可以编辑的表格</title>

<script type="text/javascript" src="jslib/jquery1.5.js"></script>
<script type="text/javascript" src="jslib/jqueryedit.js"></script>
</head>
<body>
<table border="1px">

         <tr>
            <td>编辑</td>
            <td>表格</td>
         </tr>

</table>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>可以编辑的表格</title>

<script type="text/javascript" src="jslib/jquery1.5.js"></script>
<script type="text/javascript" src="jslib/jqueryedit.js"></script>
</head>
<body>
<table border="1px">

         <tr>
            <td>编辑</td>
            <td>表格</td>
         </tr>

</table>
</body>
</html>jqueryedit.js:
Js代码
$(document).ready(function(){
var tds=$("td");
tds.click(tdclick);
});


function tdclick(){
      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);
      input.keyup(function(event){
         var myEvent =event||window.event;
         var kcode=myEvent.keyCode;
         if(kcode==13){
            var inputnode=$(this);
            var inputtext=inputnode.val();
            var tdNode=inputnode.parent();
            tdNode.html(inputtext);
            tdNode.click(tdclick);
         }
      });
      //5，将文本框加入到td中
      td.append(input);
   //6,清除点击事件
      td.unbind("click");
}

$(document).ready(function(){
var tds=$("td");
tds.click(tdclick);
});

function tdclick(){
      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);
      input.keyup(function(event){
         var myEvent =event||window.event;
         var kcode=myEvent.keyCode;
         if(kcode==13){
            var inputnode=$(this);
            var inputtext=inputnode.val();
            var tdNode=inputnode.parent();
            tdNode.html(inputtext);
            tdNode.click(tdclick);
         }
      });
      //5，将文本框加入到td中
      td.append(input);
   //6,清除点击事件
      td.unbind("click");
}

秋秋 · 发表于 2011-8-26 10:41

然后呢？编辑完了，再返回td状态，去除<input> ？

fl · 发表于 2011-8-26 10:41

当修改完成，按Enter键以后就返回到td状态啊

gz-vps · 发表于 2011-8-26 10:41

当修改完成，按Enter键以后就返回到td状态啊

嘿嘿我上次没仔细看完

爱车车 · 发表于 2011-8-26 10:41

tdNode.click(tdclick)与原click事件及unbind为什么不会冲突？

天上智喜 · 发表于 2011-8-26 10:41

  input.bind({
         keyup: function(event){
            var myEvent =event||window.event;
            var kcode=myEvent.keyCode;
            if(kcode==13){
               var inputnode=$(this);
               var inputtext=inputnode.val();
               var tdNode=inputnode.parent();
               tdNode.html(inputtext);
               tdNode.click(tdclick);
            }
         },
         blur: function(){
         var inputnode=$(this);
         var inputtext=inputnode.val();
         var tdNode=inputnode.parent();
         tdNode.html(inputtext);
         tdNode.click(tdclick);
         }
      });

楠楠 · 发表于 2011-8-26 10:42

有个jqgrid的插件可以直接用，看下来是目前jq下最好的grid了，你要的功能基本都有

会玩就好 · 发表于 2011-8-26 10:42

把文件打包传个附件撒~~~~~

楠楠 · 发表于 2011-8-26 10:42

这代码我似曾相识

秋秋 · 发表于 2011-8-26 10:42

有个TableEditor Plugin，去看看吧。

帐号		自动登录	找回密码
密码			成为会员

JQuery实现可编辑的表格

相关帖子