Jquery可编辑的表格示例代码

来源：互联网发布：电脑魔音软件编辑：程序博客网时间：2024/05/20 21:21

editTable.js页面代码如下:

//在页面装载时,让所有的td都拥有一个点击事件
$(document).ready(function(){

   //找到所有的td节点
   var tds=$("td");
   //给所有的td增加点击事件
   tds.click(tdClick);
});

/**
* td被点击事件
* @return
*/
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();
           //清空td里面的内容
           var tdNode=inputNode.parent();
           //将保存的文本框的内容填充到td中
           tdNode.html(inputText);
           //让td重新拥有点击事件
           tdNode.click(tdClick);
       }
   });
   //5、把文本框的内容加到td中
   td.append(input); //也可以用input.appendTo(td);

   //6、需要清除点击td上面的click 在jquery中相应的清除click方法unbind()
   td.unbind("click")

}

editTable.html页面代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>editTable.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
   <script type="text/javascript" src="js/editTable.js"></script>
</head>

<body>
    <table style="border:1px">
           <tr>
               <td>tfq</td>
               <td>tt</td>
           </tr>
    </table>
</body>
</html>