前台特效（3) 编辑表格
生活随笔
收集整理的這篇文章主要介紹了
前台特效（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) 编辑表格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 花呗怎么提微信钱包
- 下一篇： OpenCV类型转换