當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

前台特效（3) 编辑表格

發布時間：2025/5/22 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了前台特效（3) 编辑表格小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html><head><title>編輯表格</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script><script>$(function(){var off = true;$("#table td").each(function(){$(this).click(function(){if(off){var cont = $(this).html();$(this).html('');$(this).append("<input type='text' id='cont' value='"+cont+"'/>");$("#cont").focus().css("background-color","#ffffcc");off = false;}})});$("#cont").live({blur:function(){$(this).parent().html($(this).val());off = true;},keydown:function(event){if(event.keyCode == 13){$(this).parent().html($(this).val());off = true; }}});})</script><style>#table{border: solid 3px #cccccc;text-align: center;padding: 5px;}#table td{width:200px;height:30px;border: solid 3px #cccccc;}</style></head><body><table id="table"><tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr><tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr><tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr><tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td></tr></table></body> </html>

基本思路：

1.點擊table的td時觸發click時間，獲取td內容并賦予新添加的input，刪除td的內容，添加input

2.點擊同時，使input獲取焦點并改變背景顏色

3.當input失去焦點或者按下Enter鍵時，獲取input的value，覆蓋到td

希望對你有所幫助！ ^_^~

轉載于:https://www.cnblogs.com/longdidi/archive/2013/03/10/2952493.html

總結

以上是生活随笔為你收集整理的前台特效（3) 编辑表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。