JQuery實現表格點選就可以修改
阿新 • • 發佈：2019-02-06
我們看到有些網站表格內容點選就可以直接修改，修改完後，點選回車鍵就能將修改內容顯示成表格內容，最經典的例子：QQ簽名，不點選時候看著是一段文字，點選後就能輸入，點選編輯個性簽名就能出現能夠輸入的文字框。所以在頁面中也做一個這種效果的表格
思想：給表格td註冊一個onclick事件，當點選時候記住文字內容，並且將td表格程式設計一個輸入的文字框，並且文字框Value的值改成以前td內容，對文字框修改後，點選回車鍵同時記住文字框內容，讓後將文字框內容再寫入到td標籤裡邊
HTML頁面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">
<html>
<head>
<title>JQuery示例：可以編輯的表格</title>
<link type="text/css" rel="stylesheet"href="css/edit.css"/>
<script type="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript"src="js/jqueryedit.js"></script>
</head>
<!-- 期望表格資料一點選就可以修改-->
<body>
<table>
<tbody>
<tr>
<td>編輯個性簽名</td>
<td>12345645</td>
</tr>
</tbody>
</table>
</body>
</html>
JS檔案內容：
//在頁面裝載時，讓所有的td都擁有點選事件
$(document).ready(function(){
//找到所有td節點
var tds =$("td");
//給所有的td節點增加點選事件
tds.click(tdclick);
});
function tdclick(){
varclickfunction = this;
//0,獲取當前的td節點
var td =$(this);
//1,取出當前td中的文字內容儲存起來
var text =$(this).text();
//2，清空td裡邊內同
td.html("");
//3,建立一個文字框，也就是建一個input節點
var input =$("<input>");
//4,設定文字框中值是儲存起來的文字內容
input.attr("value",text);
//4.5讓文字框可以相應鍵盤按下的事件
input.keyup(function(event){
//記牌器當前使用者按下的鍵值
var myEvent= event || window.event;//獲取不同瀏覽器中的event物件
var kcode =myEvent.keyCode;
//判斷是否是回車鍵按下
if(kcode ==13){
varinputnode = $(this);
//獲取當前文字框的內容
var inputext= inputnode.val();
//清空td裡邊的內容,然後將內容填充到裡邊
var tdNode =inputnode.parent();
tdNode.html(inputext);
思想：給表格td註冊一個onclick事件，當點選時候記住文字內容，並且將td表格程式設計一個輸入的文字框，並且文字框Value的值改成以前td內容，對文字框修改後，點選回車鍵同時記住文字框內容，讓後將文字框內容再寫入到td標籤裡邊
HTML頁面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">
<html>
<head>
<title>JQuery示例：可以編輯的表格</title>
<link type="text/css" rel="stylesheet"href="css/edit.css"/>
<script type="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript"src="js/jqueryedit.js"></script>
</head>
<!-- 期望表格資料一點選就可以修改-->
<body>
<table>
<tbody>
<tr>
<td>編輯個性簽名</td>
<td>12345645</td>
</tr>
</tbody>
</table>
</body>
</html>
JS檔案內容：
//在頁面裝載時，讓所有的td都擁有點選事件
$(document).ready(function(){
//找到所有td節點
var tds =$("td");
//給所有的td節點增加點選事件
tds.click(tdclick);
});
function tdclick(){
varclickfunction = this;
//0,獲取當前的td節點
var td =$(this);
//1,取出當前td中的文字內容儲存起來
var text =$(this).text();
//2，清空td裡邊內同
td.html("");
//3,建立一個文字框，也就是建一個input節點
var input =$("<input>");
//4,設定文字框中值是儲存起來的文字內容
input.attr("value",text);
//4.5讓文字框可以相應鍵盤按下的事件
input.keyup(function(event){
//記牌器當前使用者按下的鍵值
var myEvent= event || window.event;//獲取不同瀏覽器中的event物件
var kcode =myEvent.keyCode;
//判斷是否是回車鍵按下
if(kcode ==13){
varinputnode = $(this);
//獲取當前文字框的內容
var inputext= inputnode.val();
//清空td裡邊的內容,然後將內容填充到裡邊
var tdNode =inputnode.parent();
tdNode.html(inputext);