实现可编辑表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<title> 实现可编辑的表格 </title>
<script type="text/javascript" src=\'#\'" /> </script>
<style type="text/css">
   td{
      border-collapse: collapse;//让相邻边框合并
      border: 1px solid black;
   }

</style>
<script type="text/javascript">
//在页面装载时,让所有td都拥有一个点击事件
   $(document).ready(function(){
  
      //找到td节点
      var tds=$("td");
    //给所有td增加点击事件
   tds.click(tdclick);
  })
   function tdclick(){
       var td=$(this);
    var text=td.text();
    //清掉当前文本中的内容
    td.empty();//也可以用td.html("");
    //建立一个文本框
    var input= $("<input>");
    //设置文本框的值是保存起来的文本内容
    input.attr("value",text);
    //让文本框响应键盘按下的事件
  
    input.keyup(function(event){
      var myEvent=event || window.event;
   var kcode=myEvent.keyCode;
   if(kcode == 13){
      var inputnode=$(this);
      var inputext=inputnode.val();
      var tdNode=inputnode.parent();
      tdNode.html(inputext);
      tdNode.click("tdclick");
   }
    })
     td.append(input);
     td.unbind("click");
   }
</script>   
 
  

 

</head>
<body>
  <table border="1px">
    <tbody>
  <tr>
    <td>123123</td>
    <td>456456</td>
     </tr>
 </tbody>
  </table>
</body>
</html>

你可能感兴趣的:(html,可编辑表格,编辑表格)