!DOCTYPE html>
html lang="en">
head>
 meta charset="UTF-8">
 title>Title/title>
 script type="text/javascript" src="jslib/jquery-3.1.1.js">/script>
 script type="text/javascript" src="jslib/edit.js">/script>
 link type="text/css" href="css/edit.css" rel="external nofollow" rel="stylesheet">/head>
 
/head>
body>
 table>
  tbody>
   tr>
    td>1111/td>
    td>2222/td>
   /tr>
   tr>
    td>3333/td>
    td>4444/td>
   /tr>
  /tbody>
 /table>
/body>
/html>

/*利用table和tr中的空隙來進行控制間隙的顏色*/
table{
 border: 0px;
 background: #000;
}
tr{
 background: #FFF;
}

//在頁面裝載的時候進行對td的點擊
$(document).ready(function () {
 var tds = $("td");
 tds.click(tdclick);
});
function tdclick() {
  //1將文本的內容保存起來
  var td = $(this);
  var text = td.text();
  //2清空td里面的內容
  td.html("");
  //3建立文本框
  var input = $("input>");
  //4.設置文本框的值是保存起來的值
  input.attr("value", text);
  //4.5相應回車和鍵盤事件
  input.keyup(function (event) {
   //判斷按鍵是什么
   var myevent = event || window.event;
   var key = myevent.keyCode;
   if (key == 13) {
    var inputnode = $(this);
    //1.保存文本框的內榮
    var inputtext = inputnode.val();
    //2.清空td里面的內容保存的文本框填充到td中去
    var tdNode = inputnode.parent();
    tdNode.html(inputtext);
    //4.讓td重新擁有點擊事件
    td.click(tdclick);
   }
  });
  //5將文本框加入到td中
  td.append(input);
  //6為了防止td的點擊事件，我們可以移除
  td.unbind("click");
}