html部分很簡單
<body> <table> <thead> <tr> <th colspan="2">鼠標點擊表格項就可以編輯</th> </tr> </thead> <tbody> <tr> <th>學號</th> <th>姓名</th> </tr> <tr> <td>000001</td> <td>張三</td> </tr> <tr> <td>000002</td> <td>李四</td> </tr> <tr> <td>000003</td> <td>王五</td> </tr> <tr> <td>000004</td> <td>趙六</td> </tr> </tbody> </table> </body>
css也比較簡單
*{margin:0px;padding:0px;} table{ border:1px solid black; margin:0 auto; border-collapse:collapse; width:400px; } table td{border:1px solid black;width:50%;} table th{border:1px solid black;width:50%;} tbody th{background-color:#A3BAE7;}
最主要的是jQuery部分，其主要思路是：
當鼠標點擊單元格的時候觸發事件，該事件會在單元格中添加一個輸入框input，這樣就可以輸入相應的文字了
$(function(){ //找到表格的內容區域中所有的奇數行,並設置不同顏色 $("tbody tr:even").css("background-color","#ECE9D8"); //找到所有的學號單元格 var numTd = $("tbody td:even"); //給這些單元格註冊鼠標點擊的事件 numTd.click(function() { //找到當前鼠標點擊的td,this對應的就是響應了click的那個td var tdObj = $(this); if (tdObj.children("input").length > 0) { //當前td中input，不執行click處理 return false; } var text = tdObj.html(); //清空td中的內容 tdObj.html(""); //1.創建一個文本框 2.去掉文本框的邊框 3.設置文本框中的文字字體大小是16px //4.使文本框的寬度和td的寬度相同 5.設置文本框的背景色 //6.需要將當前td中的內容放到文本框中 7.將文本框插入到td中 var inputObj = $("<input type='text'>").css("border-width","0") .css("font-size","16px").width(tdObj.width()) .css("background-color",tdObj.css("background-color")) .val(text).appendTo(tdObj); //是文本框插入之後就被選中 inputObj.trigger("focus").trigger("select"); inputObj.click(function() { return false; }); //處理文本框上回車和esc按鍵的操作 inputObj.keyup(function(event){ //獲取當前按下鍵盤的鍵值 var keycode = event.which; //處理回車的情況 if (keycode == 13) { //獲取噹噹前文本框中的內容 var inputtext = $(this).val(); //將td的內容修改成文本框中的內容 tdObj.html(inputtext); } //處理esc的情況 if (keycode == 27) { //將td中的內容還原成text tdObj.html(text); } }); }); });
轉載於:https://www.cnblogs.com/JoannaQ/archive/2012/09/09/2678114.html