讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

首页 > web前端 > js教程 > 正文

点击单元格后可编辑单元格内文本如何制作_javascript技巧

php中文网

发布： 2016-05-16 19:25:17

原创

1096人浏览过

如何通过JAVASCRIPT实现当点击相应的单元格，该单元格内文本变成可编辑的INPUT或SELECT，离开单元格后又单元格内文本为修改后文本。
我通过以下方法来实现点击单元格变成INPUT，可不知该在点其它单元格后恢复文本状态和如何返回INPUT后修改的值。是否有更好的方法来实现该效果。

腾讯云AI代码助手

腾讯云AI代码助手

基于混元代码大模型的AI辅助编码工具

腾讯云AI代码助手

205

腾讯云AI代码助手

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

2、

<script language="javascript"> 
window.attachEvent("onload", getTable); 
function getTable(){ 
    for(i=0; i<tbl.cells.length; i++){ 
        var cell = tbl.cells[i]; 
        cell.attachEvent("onmousedown", getTexttoInput); 
    } 
} 
getTexttoInput = function(evt){ 
    var input; 
    var html 
    evt = (evt) ? evt : ((window.event) ? window.event : "") 
    if (evt) { 
        var cell = (evt.target) ? evt.target : evt.srcElement; 
        for(i=0; i<tbl.cells.length; i++){ 
            if(tbl.cells[i] == cell){ 
                html = '<input type="text" id="input'+i+'" value="' + tbl.cells[i].innerText + '" style="width:100%" onblur="this.parentNode.innerHTML=this.value;" onkeydown="if(window.event.keyCode==13){this.parentNode.innerHTML=this.value;}">' 
                   tbl.cells[i].innerHTML = html; 
           window.setTimeout('document.getElementById("input'+i+'").focus();',300); 
            } 
        } 
    } 
} 
</script><table border="1" cellpadding="0" cellspacing="0" id="tbl">
<tr>
<td>123</td> 
<td>456</td> 
</tr>
<tr>
<td>abc</td> 
<td>efg</td> 
</tr>
</table>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

大家都在看：

Cypress自动化测试：解决悬停菜单和子菜单交互难题如何开发一个日期选择插件_JavaScript日期选择插件开发实战教程 js事件委托如何理解 Flask与JavaScript协同：动态控制表单元素可见性教程实现交互式表格实时总计更新的JavaScript教程

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：菜单效果_javascript技巧下一篇：textbox右键菜单_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

为什么需要学习javascript_它如何成为现代前端开发的核心？ JavaScript是前端事实上的通用语言，因其浏览器原生支持、开箱即用、生态成熟及全栈延伸能力；它支撑现代前端工程体系，持续进化解决开发痛点，核心在于与DOM、事件、网络等协同工作。

2025-12-21 18:13:02

567

怎样使用JavaScript操作CSS_如何动态修改样式和类名 JavaScript操作CSS核心是通过style属性改内联样式或classList控制类名；内联样式需驼峰命名且优先级最高，classList更推荐以实现关注点分离；读取计算样式须用getComputedStyle。

2025-12-21 18:06:32

727

javascript中的Symbol类型有何作用_如何创建唯一对象属性 Symbol是JavaScript中用于创建唯一、不可枚举属性键的原始类型，可防冲突、控可见性、定义内置协议；通过Symbol()、Symbol.for()创建，需用方括号访问，支持私有模拟与常量替代。

2025-12-21 18:04:02

401

什么是JavaScript中的异步迭代_如何使用for-await-of处理异步数据？ for-await-of用于按序消费异步迭代器，自动await每次next()返回的Promise；需对象实现[Symbol.asyncIterator]()，如asyncfunction*、ReadableStream；不适用于高并发场景。

2025-12-21 18:00:09

779

javascript中函数如何声明_它们有哪些类型 JavaScript函数分四类：函数声明（提升，可前置调用）、函数表达式（不提升，需先定义）、箭头函数（无this/arguments，不可构造）、方法简写（对象中this绑定调用者）。

2025-12-21 17:56:41

180

javascript中的跨域问题是什么_JSONP和CORS如何解决？跨域问题本质是浏览器同源策略限制，防止恶意网站窃取用户数据；JSONP利用script标签绕过但仅支持GET且存XSS风险；CORS通过服务端响应头正向解决，需配置Access-Control-Allow-Origin等字段。

2025-12-21 17:51:08

567

Javascript如何实现深拷贝_有哪些方法和注意事项？深拷贝需创建完全独立的新对象，避免嵌套引用；常用方法有JSON序列化（简单但限制多）、structuredClone（现代推荐，支持循环引用及多数内置类型）和手写递归（可控强但易错），需注意循环引用、特殊类型、原型链及性能权衡。

2025-12-21 17:45:14

224

如何延迟执行代码_Javascript的setTimeout怎么用 setTimeout用于延迟执行代码一次，接收函数和毫秒数参数，返回定时器ID；可用clearTimeout取消；实际延迟受事件循环影响，不保证精确。

2025-12-21 17:43:02

981

如何理解javascript作用域链_变量查找遵循什么规则？ JavaScript作用域链是函数创建时绑定的静态词法环境嵌套链，变量查找按定义时的作用域链从当前环境向上逐级搜索直至全局，未声明则报ReferenceError。

2025-12-21 17:35:02

340

JavaScript数据结构如何实现与应用？ JavaScript数据结构需依操作模式选择：查多用哈希（Map/Object），删多用链表，有序少变更用数组，层级深用树；栈用push/pop，队列优选双端链表或双栈，链表注意内存泄漏，树结构助于理解嵌套数据与算法。

2025-12-21 17:32:02

992

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部