>JQueryEdit.html(可编辑表格)&&js

最新推荐文章于 2024-06-10 09:52:35 发布

原创最新推荐文章于 2024-06-10 09:52:35 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#stylesheet #input #function #html #table

本文介绍了一种使用JQuery实现表格单元格可编辑的方法。通过点击单元格，该单元格会变成输入框，允许用户修改内容。当按下Enter键时，输入框的内容会被保存回单元格，并恢复为不可编辑状态。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>JQueryEdit.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">

    
    <link rel="stylesheet" type="text/css" href="css/edit.css" />
     <script type="text/javascript" src="jslib/jquery.js"></script>
      <script type="text/javascript" src="jslib/jqueryedit.js"></script>

</head>

<body>
    <table>
    <tbody>
    <tr>
    <td>123</td>
    <td>456</td>
    </tr>
    </tbody>
    </table>


</body>
</html>

------js代码

$(document).ready(function (){
var tds = $("td");
//注册点击事件
tds.click(tdclick);
});

function tdclick(){

//取出td里面的内容保存起来
    var td = $(this);
         var text = td.text();
    //清空td里面的内容
         td.html(""); //td.empty();
    //建一个文本框，即input节点
         var input = $("<input>");
    //设置文本的值是保存起来的值
         input.attr("value",text);
          //文本框相应事件
         input.keyup(
           function (event){
            //获取用户按下的键
            //判断按下的事enter键
        var myEvent = event || window.event;
        var keycode=myEvent.keyCode;
        if(keycode == 13){

          var inputNode=$(this);
          //保存当前文本的内容
          var inputext = inputNode.val();
           //清空td的内容将文本的内容填充到td中
          var tdNode = inputNode.parent();
          tdNode.html(inputext);
          //让td获得click事件
          tdNode.click(tdclick);
        }

           }

         );

    //见文本添加到td中1
         td.append(input);
          //选中
         var inputdom = input.get(0);
         inputdom.select();

         //清除td的click事件
         td.unbind("click");


}