jquery实现点击表格修改信息！

来源：互联网发布：mysql添加字段默认值编辑：程序博客网时间：2024/05/23 22:03
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>JQuery示例：可以编辑的表格</title>         <link type="text/css" rel="stylesheet" href="css/edit.css"/>      <script type="text/javascript" src="js/jquery.js"></script>      <script type="text/javascript" src="js/jqueryedit.js"></script>  </head>  <!-- 期望表格数据一点击就可以修改 -->  <body>        <table>            <tbody>                <tr>                    <td>编辑个性签名</td>                    <td>12345645</td>                </tr>            </tbody>        </table>  </body></html> JS文件内容：//在页面装载时，让所有的td都拥有点击事件$(document).ready(function(){    //找到所有td节点    var tds = $("td");    //给所有的td节点增加点击事件    tds.click(tdclick);});function tdclick(){    var clickfunction = this;    //0,获取当前的td节点    var td = $(this);    //1,取出当前td中的文本内容保存起来    var text = $(this).text();    //2，清空td里边内同    td.html("");    //3,建立一个文本框，也就是建一个input节点    var input = $("<input>");    //4,设置文本框中值是保存起来的文本内容    input.attr("value",text);    //4.5让文本框可以相应键盘按下的事件    input.keyup(function(event){        //记牌器当前用户按下的键值        var myEvent = event || window.event;//获取不同浏览器中的event对象        var kcode = myEvent.keyCode;        //判断是否是回车键按下        if(kcode == 13){            var inputnode = $(this);            //获取当前文本框的内容            var inputext = inputnode.val();            //清空td里边的内容,然后将内容填充到里边            var tdNode = inputnode.parent();            tdNode.html(inputext);            //让td重新拥有点击事件            tdNode.click(tdclick);        }    });    //5，把文本框加入到td里边去    td.append(input);    //5.5让文本框里边的文章被高亮选中    //需要将jquery的对象转换成dom对象    var inputdom = input.get(0);    inputdom.select();       //6,需要清楚td上的点击事件    td.unbind("click");}