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

最新推荐文章于 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.csdn.net/dashi99/article/details/2861461
版权
本文介绍了如何使用JavaScript实现类似Google在线文档中Excel功能，即当用户双击表格单元格时，该单元格变为可编辑的文本框。通过监听`document.ondblclick`事件，获取鼠标点击的目标元素，判断是否为`td`标签，如果是则将其转换为输入框。
摘要由CSDN通过智能技术生成

不知道有没有用过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元/天 解锁文章
dashi99
关注
专栏目录
双击单元格变成可编辑的文本框 - 制作过程
wangdabin_1216的专栏
11-16 1040
新建网页 1 var inputItem; // 输入框句柄 var g_activeItem; // 保存正在编辑的单元格 function changeToText(obj){  if( obj && inputItem ) {   // 如果存在正在编辑的单元格， 则取消编辑状态， 并将编辑的数据保存起来   var str = " ";   if(inputItem.
js 实现 双击单元格变为可编辑
03-31
js 实现 双击单元格变为可编辑! 值得下载看看!资源免费,大家分享!!
双击文本框编辑功能代码
yanleigis的专栏
03-05 820
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.
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
js实现双击单元格变成文本输入框效果代码
12-10
在Web开发中，有时我们需要增加一些交互功能来提高用户体验，比如将表格中的某个单元格通过双击变成可编辑的状态（即变为一个文本输入框）。这样的功能常见于数据表格的编辑场景中，能够方便用户快速修改数据。接...
js实现双击单元格变文本框
01-08
### JavaScript 实现表格单元格双击变为可编辑文本框 #### 概述 在Web开发中，有时我们需要让用户能够方便地编辑表格中的数据。一种常见的做法是通过双击表格单元格将其转换为一个可编辑的文本框。这种方法既提高...
JS实现双击内容变为可编辑状态
12-08
一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。。 我在网上查了很多资料，但都有一个小bug，就是当获取焦点后，光标的位置在文本框内容是开始处，这样编辑时还需要用户再...
wpf DataGrid 实现单击单元格进入编辑状态
03-06
该代码示例实现了在wpf中，单击DataGrid单元格进入编辑状态（DataGridCheckBoxColumn 单击切换选中状态）的功能。
javascript 双击文本框编辑功能代码
10-30
javascript 双击文字后实现编辑文本功能代码
一个简单的双击编辑表格单元格，更新数据表的demo。
weixin_33713503的博客
03-07 138
已经修改完毕！修改后的代码是demo2！  ================================================================= demo2（修改后的）：   &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt;  &lt;HEAD...
双击文字出现编辑文本框的JS代码
u011425213的专栏
07-19 761
<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 497
在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。。我在网上查了很多资料，但都有一个小bug，就是当获取焦点后，光标的位置在文本框内容是开始处，这样编辑时还需要用户再重新选择一下光标位置，这样的交互感觉不好；后来查到新的资料解决了此问题，希望可以帮助到更多的人。代码部分：注意：设置选择文本的内容或设置光标位置/p>"...
javascript函数(数组)
dashi99的专栏
08-28 655
1.array.concat(value,......)方法concat()将创建并返回一个新数组,这个数组是将所有的参数都添加到array中生成的.它并不改变原array的数组ex:a = [1,2,3];alert(a.concat(4,5));alert(a); 2.array.join()将数组连接起来构成一个字符传.ex:a = new Array(1
vue el-table 可双击编辑单元格 html代码
最新发布
06-16
要实现双击编辑 el-table 单元格并渲染 HTML 代码，可以使用 el-table 的 edit-config 属性和 edit-template 属性。以下是一个简单的示例代码： ```html <template> <el-table :data="tableData" :edit-config="{trigger: 'dblclick'}" :edit-template="getEditTemplate"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="desc" label="描述"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, desc: '<b>我是张三</b>' }, { name: '李四', age: 25, desc: '<b>我是李四</b>' }, { name: '王五', age: 30, desc: '<b>我是王五</b>' } ], editingRow: null } }, methods: { getEditTemplate({ row, column }) { if (column.property === 'desc') { return ` <div> <el-input type="textarea" v-model="row.desc"></el-input> </div> ` } } } } </script> ``` 在上面的代码中，我们将 el-table 的 edit-config 属性设置为 { trigger: 'dblclick' }，表示双击单元格时进入编辑模式。然后，我们使用 el-table 的 edit-template 属性指定一个函数，用于渲染编辑单元格的模板。 在 getEditTemplate 函数中，我们检查当前单元格的属性是否为 'desc'，如果是，则返回一个包含文本框的编辑模板。在模板中，我们使用 v-model 指令将文本框的值绑定到当前行的 desc 属性上。 这样，我们就实现了一个可以双击编辑 el-table 单元格并渲染 HTML 代码的组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值