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

<!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="./styles.css">-->
    <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");
     
 
 
 
}

 

 

 


 

你可能感兴趣的:(html,function,table,input,stylesheet)