Ajax對錶格中的資訊不重新整理頁面進行更新資料
阿新 • • 發佈：2019-02-08
html:
<!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="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>
css:控制單根邊框
/*利用table和tr中的空隙來進行控制間隙的顏色*/
table{
border: 0px;
background: #000;
}
tr{
background: #FFF;
}js:
//在頁面裝載的時候進行對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"); }