首页 > 代码库 > 使用JQuery双击修改Table中Td
使用JQuery双击修改Table中Td
<html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> table{ border-collapse:collapse; border-spacing:0; margin-right:auto; margin-left:auto; width:100%; } th,td{ border:1px solid #b5d6e6; font-size:12px; font-weight:normal; vertical-align:middle; height:20px; width:25%; } th{ text-align:center; background-color:Gray; } </style> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script> $(function(){$(‘#tableId‘).on(‘dblclick‘,‘td‘,function(){ //console.info($(this).text()); var oldVal = $(this).text(); var input = "<input type=‘text‘ id=‘tmpId‘ value=http://www.mamicode.com/‘" + oldVal + "‘ >"; $(this).text(‘‘); $(this).append(input); $(‘#tmpId‘).focus(); $(‘#tmpId‘).blur(function(){ if($(this).val() != ‘‘){ oldVal = $(this).val(); } //closest：是从当前元素开始，沿Dom树向上遍历直到找到已应用选择器的一个匹配为止。 $(this).closest(‘td‘).text(oldVal); }); });});</script></head><body><table id="tableId"> <tr><th>head01</th><th>head02</th><th>head03</th><th>head04</th></tr> <tr><td>head11</td><td>head12</td><td>head13</td><td>head14</td></tr> <tr><td>head21</td><td>head22</td><td>head23</td><td>head24</td></tr> <tr><td>head31</td><td>head32</td><td>head33</td><td>head34</td></tr> <tr><td>head41</td><td>head42</td><td>head43</td><td>head44</td></tr> </table></body></html>
使用JQuery双击修改Table中Td
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。