双击单元格变成可编辑的文本框

最新推荐文章于 2021-02-16 22:06:58 发布
最新推荐文章于 2021-02-16 22:06:58 发布
阅读量2.2k 收藏 4
点赞数 1
分类专栏： JavaScript 文章标签： function input border excel javascript table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dashi99/article/details/2861461
版权
本文介绍了如何使用JavaScript实现类似Google在线文档中Excel功能，即当用户双击表格单元格时，该单元格变为可编辑的文本框。通过监听`document.ondblclick`事件，获取鼠标点击的目标元素，判断是否为`td`标签，如果是则将其转换为输入框。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

不知道有没有用过google的在线文档服务， 有excel类型的文档， 大家都知道excel每个单元格都可以编辑， 这里我来说说我实现的思路， 高手有高手的想法和做法， 但是我们菜鸟也可以偶尔的冒充一把， 不亦乐乎， 呵呵。

第一步： 准备工作，建立个tabedit.html
里面的内容很简单， 建立个5X5的表格, 代码如下：

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>双击单元格变成可编辑的文本框</title>
</head>

<body>

<table border="1" width="100%" id="table1">
 <tr>
  <td>　</td>
  <td>　</td>
  <td>　</td>
  <td>　</td>
  <td>　</td>
 </tr>
 <tr>
  <td>　</td>
  <td>　</td>
  <td>　</td>
  <td>　</td>
  <td>　</td>
 </tr>
 <tr>
  <td>　</td>
  <td>　</td>
  <td>　</td>
  <td>　</td>
  <td>　</td>
 </tr>
 <tr>
  <td>　</td>
  <td>　</td>
  <td>　</td>
  <td>　</td>
  <td>　</td>
 </tr>
 <tr>
  <td>　</td>
  <td>　</td><
最低0.47元/天 解锁文章
js 实现 双击单元格变为可编辑
03-31
js 实现 双击单元格变为可编辑! 值得下载看看!资源免费,大家分享!!
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
12-29
本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态。分享给大家供大家参考，具体如下： html部分： <table> <thead> <tr> <th width=40px;>序号</th> <th>班次</th> <th>分组</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat=value> <td width=40px;>{{value.id }}</td> <td>{{value.trainNu
双击单元格变成可编辑的文本框 - 制作过程
web开发自学
11-16 469
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;title&gt;新建网页 1&lt;/title&gt; &lt;script language="javascript"&gt; &
双击文本框编辑功能代码
yanleigis的专栏
03-05 862
javascript 双击文本框编辑功能代码 input.t {border:1px solid #fff;background:#fff;} input.s {border:1px solid #369;background:#fff;} var test = document.getElementById("test"); var mysubmit = document.
js实现双击单元格变成文本输入框效果代码
12-10
在Web开发中，有时我们需要增加一些交互功能来提高用户体验，比如将表格中的某个单元格通过双击变成可编辑的状态（即变为一个文本输入框）。这样的功能常见于数据表格的编辑场景中，能够方便用户快速修改数据。接...
JavaScript实现表格单元格双击转文本框编辑
标题“js实现双击单元格变文本框”明确了我们要探讨的主题是使用JavaScript为表格中的单元格添加双击事件，当用户双击单元格时，会将其内容转变为一个可编辑的文本框，便于用户输入或修改内容。 2. 描述解析: ...
js实现双击单元格变文本框
01-08
### JavaScript 实现表格单元格双击变为可编辑文本框 #### 概述 在Web开发中，有时我们需要让用户能够方便地编辑表格中的数据。一种常见的做法是通过双击表格单元格将其转换为一个可编辑的文本框。这种方法既提高...
JS实现双击内容变为可编辑状态
12-08
一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。。 我在网上查了很多资料，但都有一个小bug，就是当获取焦点后，光标的位置在文本框内容是开始处，这样编辑时还需要用户再...
wpf DataGrid 实现单击单元格进入编辑状态
03-06
该代码示例实现了在wpf中，单击DataGrid单元格进入编辑状态（DataGridCheckBoxColumn 单击切换选中状态）的功能。
javascript 双击文本框编辑功能代码
10-30
javascript 双击文字后实现编辑文本功能代码
双击表单变成输入框，很好用
12-10
<script language="javascript"> // 将单元格转化成文本框 function changeTotext(obj) { var tdValue = obj.innerText; obj.innerText = ""; var txt = document.createElement("input"); txt.type = "text"; txt.value = tdValue; txt.id = "_text_000000000_"; txt.setAttribute("className","text"); obj.appendChild(txt); txt.select(); //obj.style.border = "1px dashed #ff9900"; } // 取消单元格中的文本框，并将文本框中的值赋给单元格 function cancel(obj) { var txtValue = document.getElementById("_text_000000000_").value; obj.innerText = txtValue; } /*********************************************/ // 事件 document.ondblclick = function() { if (event.srcElement.tagName.toLowerCase() == "td") { changeTotext(event.srcElement); }
一个简单的双击编辑表格单元格，更新数据表的demo。
weixin_33713503的博客
03-07 163
已经修改完毕！修改后的代码是demo2！  ================================================================= demo2（修改后的）：   &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt;  &lt;HEAD...
双击文字出现编辑文本框的JS代码
u011425213的专栏
07-19 786
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 双击文本实现编辑 input.a {border:1px solid #fff;background:#fff;} input.b {border:1px solid #369;background:#fff;} <input class="a"
java文本框双击可编辑_JS实现双击内容变为可编辑状态
weixin_28818643的博客
02-16 532
在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。。我在网上查了很多资料，但都有一个小bug，就是当获取焦点后，光标的位置在文本框内容是开始处，这样编辑时还需要用户再重新选择一下光标位置，这样的交互感觉不好；后来查到新的资料解决了此问题，希望可以帮助到更多的人。代码部分：注意：设置选择文本的内容或设置光标位置/p>"...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值