可编辑表格（JQ实现）

2009/07/18

<!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=utf-8" />
<title>可编辑的表格</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script language="javascript">
  $(document).ready(function(){
    //先找到所有td
    var tds=$('td');
    tds.click(clickfn);
    });
      
  function clickfn(){
    var td=$(this);
    var text=td.text();
    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 inputText=inputNode.val();
          var tdNode=input.parent();
          tdNode.html(inputText);
          tdNode.click(clickfn);
          
        }
    });
    td.append(input);
    var inputDom=input.get(0);  //JQ对象转化为DOM对象
    inputDom.select();
    td.unbind('click');
  }

</script>
<style type="text/css">

</style>
</head>
<body>
<table>
  <tbody>
    <tr>
      <td>聂风</td>
      <td>步惊云</td>
      <td>绝无神</td>
    </tr>
    <tr>
      <td>聂风</td>
      <td>步惊云</td>
      <td>绝无神</td>
    </tr>
    <tr>
      <td>聂风</td>
      <td>步惊云</td>
      <td>绝无神</td>
    </tr>
  </tbody>
</table>
</body>
</html>

提示：您可以先修改部分代码再运行

Tags: 可编辑表格