双击table的td进行编辑

最新推荐文章于 2024-09-19 13:09:38 发布
最新推荐文章于 2024-09-19 13:09:38 发布
阅读量2.6k 收藏 4
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cj_lf/article/details/78214692
版权
这篇博客介绍如何在动态生成的HTML表格中，通过JavaScript实现单元格（TD）的双击编辑功能，适用于AJAX加载的数据展示。
摘要由CSDN通过智能技术生成

由于table是ajax拼接的，所以就写了个table的头出来，方便看一下

$('#tb_list').on('dblclick', 'td', function () {
   
    var oldVal = $(this).text();
    var input = "<input type='text' id='tmpId' value='" + oldVal + "' >";
    $(this).text('');
    $(this).append(input);
    $('#tmpId').focus();
    $(
最低0.47元/天 解锁文章
td双击修改
Web_Notes的博客
03-24 210
html htmlList += '<td class="score_td" index_in="' + j + '" iindex_out="' + i + '">' + item.DeductPointList[j].Score + '</td>'; css //双击修改分数 $(".score_td").dblclick(function () { var td = $(this); var j_ = td.attr('ind
table双击td修改内容
09-12
table双击td修改内容。纯手工，纯前端无后端。可以应用后端，不过需要自己修改样式。白嫖党：https://blog.csdn.net/qq_38508172/article/details/82660950
el-table表格行双击进行编辑
m939499的博客
09-19 381
双击单元格出现编辑框，编辑框失去焦点后保存内容。
table td 可编辑
学习点滴
04-09 771
[size=small][b]jquery 版[/b][/size] [code="java"] ${p.PKGCOUNT} [b]注:[/b]event.srcElement ? event.srcElement : event.target)//判断浏览器IE为event.srcElement Firefox下为event.target. 函数: var oldObj="";...
jQuery双击编辑td数据
weixin_30381317的博客
02-28 547
html <td class="remark" style="width: 200px;"> {$vo.remark} </td> js $('table#ai').on("dblclick",".remark",function(){ let $td=$(this); //获取被双击的td单元格 let _t=$td.text().trim...
Table编辑事件
weixin_44543135的博客
04-08 1130
开发工具与关键技术： HTML5, JavaScript 作者：张鱼 撰写时间：2019 年 4月 6日 1、 table编辑事件是通过双击table的td，然后对td进行编辑，方便了修改表格内容。 （1） 首先创建好一个table，在table里嵌入tr，th，td等行以及列元素；代码如下： <table class="table table-bordered"> ...
点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）
热门推荐
qq_36856975的博客
03-02 2万+
1.先上最后效果图： 2.代码跟上，重点在 2）： 1） //服务列表页面动态加载服务 function ready() { var url = base_path+"console/cfg/getBaseLayers/"+configId; $.ajax({ url:url, type:"get", dataT
js修改table中Td的值(定义td的双击事件)
10-27
同时还添加了取消更改的逻辑，用户在双击某个td单元格后可以编辑其内容，并且如果用户按下ESC键则会取消更改。 首先，为了修改td单元格的值，需要为每个td单元格绑定一个双击事件。可以使用JavaScript函数...
bootstrap table实现双击可编辑、添加、删除行功能
08-29
"bootstrap table实现双击可编辑、添加、删除行功能" Bootstrap Table是基于Bootstrap的表格插件，提供了丰富的功能和高效的渲染性能。今天，我们将详细介绍如何使用Bootstrap Table实现双击可编辑、添加、删除行...
td点击可编辑
daifeng的博客
02-18 1078
点击table里面的td可以编辑 加入contentEditable="true" 属性 <td contentEditable="true"> </td>
javascript将table的td变为可编辑的input，实现表格动态编辑（带示例版）
littlehow的专栏
07-03 4857
该内容很久以前就写了，放在下载频道，csdn自动将分数调至很高，所以今天把里面的内容全部以博客形式写出来
如何使table中td可以编辑
qq_40294670的博客
04-15 1457
PHP根据path路径获取图片二进制流 public function GetBinaryStreamPic(){ path=request()−>(path");if(fileexists(path= request()- >(path"); if (file_exists(path=request()−>(path");if(filee​xists(path)) { } } Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command + B 斜体：
js编辑table td
liuxueyi521的专栏
12-28 696
1、table的view界面： 2、转为edit界面： 3、保存后的界面： 4、在保存的时候，可以把整个html传递到后台； 操作 序号 风险事件归类  function test(obj)   {        var R1InnerHtml ='&nbsp ';
html 单元格编辑状态,angularjs实现table表格td单元格单击变输入框/可编辑状态示例...
weixin_39593354的博客
05-31 549
本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态。分享给大家供大家参考，具体如下：html部分：序号班次分组操作{{value.id }}{{value.trainNumber}}{{value.groupId}}上移下移删除js部分：/*** 单元格单击变编辑* @param e*/$scope.edit=function(e){var td = $(e.ta...
js样式创建可编辑表格
qq_64975782的博客
12-12 1189
js实现可编辑表格，支持删除行，只读，编辑
手把手教你实现一个可编辑的Table
不想起床
08-31 1628
主要实现功能 * 在线编辑 * 支持键盘导航 * 支持批量复制粘贴
HTML表格编辑教程
yunduanaoligei的博客
11-23 886
今天分享下”HTML表格编辑教程“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。今天的文章就分享到这啦，内容转自divcss5平台，下篇文章再见！ 在html中绘制表格使用table标签 tr表示行 td表示列 th表示表头，表头通常用于列名字。 下面是一个列子。 ​​<​​​​html​​​​>​​ ​​<​​​​head​​​​>​​ ​​<​​​​title​​​​>T
ajax双击表格修改内容
BankxiY的博客
10-20 558
正常情况下,有一种思路是双击事件触发增加一个input,将原值附给input,然后失去焦点时判断是否更改,不更改恢复原值,更改则用后台交互更新数据库并更改页面内容,参考代码(摘): $(function(){ $('#tableId').on('dblclick','td',function(){ var oldVal = $(this).text; var input = "...
JQuery绑定双击事件实现table表中数据的修改
weixin_42397885的博客
09-04 1705
JQuery绑定双击事件实现table表中数据的修改 1. 利用JQuery的中的双击事件，失去焦点和获得焦点事件； 2. 当发生双击事件时，实现文本编辑的功能 3. 同时，文本框获得焦点事件，把表中td原来的数据写入文本框中 4. 当文本框中的内容发生改变失去焦点时，自动保存 姓名 年龄 爱好 地址 狂铁 2 激发电流 北京 弈星 3 法术伤害 北京 裴擒虎 2 提升等...
前端:js实现双击table单元格变为可编辑状态
最新发布
10-15
在JavaScript中，实现表格单元格（td或th）的双击事件以使其变为可编辑状态通常涉及到以下几个步骤： 1. 首先，你需要获取到表格元素，并给每个单元格添加点击事件监听器。这可以通过`addEventListener('click', function)`来完成。 ```javascript const table = document.getElementById('your-table-id'); table.addEventListener('click', cellClickHandler); ``` 2. 创建`cellClickHandler`函数，检查是否进行了双击操作。你可以通过计算两次点击的时间间隔来判断。如果时间间隔小于一定阈值（比如400毫秒），则认为是双击。 ```javascript let isDblClick = false; function cellClickHandler(event) { if (isDblClick) { // 单元格已变为可编辑状态，处理编辑逻辑 editCell(event.target); } else { const timeSinceLastClick = new Date() - lastClickTime; // 假设lastClickTime保存了上一次点击的时间 if (timeSinceLastClick < 400) { isDblClick = true; lastClickTime = new Date(); } else { isDblClick = false; } } } ``` 3. 当单元格变为可编辑状态时，你可以添加相应的UI变化，如改变背景色、启用输入框等，并绑定编辑完成后恢复原状的逻辑。 4. 编辑完成后，记得清除`isDblClick`标志，以便于下一次双击时继续触发同样的过程。 ```javascript function editCell(cell) { cell.contentEditable = true; cell.classList.add('editable'); lastEditTime = new Date(); // 更新最近编辑时间 // 添加失去焦点事件处理，编辑结束后取消内容编辑 cell.addEventListener('blur', () => { cell.contentEditable = false; cell.classList.remove('editable'); }); } // 初始化上一次点击时间 lastClickTime = new Date(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值