前端:JS实现双击table单元格变为可编辑状态

简介: 前端:JS实现双击table单元格变为可编辑状态

相信这个功能对于很多同学都是很简单的了,但是对于我这个自称全栈的同学来说,还是值得做个笔记的,方便以后直接copy代码。

这里就直接放代码了

下面是有两种双击单元格的情况,可以自行选择使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现双击table单元格变为可编辑状态</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
  function Show(element) {
    var oldhtml = element.innerHTML;
    if (oldhtml == null || oldhtml.length == 0) {
      return alert("不能为空!");
    }
    var newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.value = oldhtml;
    newInput.onblur = function() {
      element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
    }
    element.innerHTML = '';
    element.appendChild(newInput);
    newInput.setSelectionRange(0, oldhtml.length);
    newInput.focus();
  }
</script>
</head>
<body>
<table class="sui-table table-bordered">
  <thead>
  <tr>
      <th width="20%">队列大小</th>
      <th width="20%">速率</th>
    <tr>
    </thead>
    <tbody>
    <tr>
      <td ondblclick="Show(this)"><span>111</span></td>
      <td><span ondblclick="Show(this)">222</span></td>
    </tr>
    </tbody>
  </table>
</body>
</html>

有借鉴网上的。

目录
相关文章
|
2天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
17 1
|
3天前
|
JavaScript 前端开发 开发者
深入探讨前端框架Vue.js的数据绑定原理
在前端开发中,数据绑定是Vue.js框架的核心特性之一,它实现了视图与数据的双向绑定,极大地提高了开发效率和用户体验。本文将深入探讨Vue.js数据绑定的原理,从响应式数据、依赖追踪到虚拟DOM等方面进行详细分析,帮助读者更好地理解Vue.js框架的工作机制。
8 0
|
3天前
|
缓存 JavaScript 前端开发
前端工程化:优化JS加载速度
在现代Web应用中,JavaScript已成为必不可少的一部分,但是随着业务复杂度的增加,JS文件的体积也越来越大,导致网页加载速度变慢,影响用户体验。本文将介绍前端工程化的优化策略,以提高JS文件的加载速度。
|
4天前
|
存储 缓存 JavaScript
解密前端框架Vue.js的响应式原理
作为当下最流行的前端框架之一,Vue.js的响应式原理是其核心之一。本文将深入探讨Vue.js的响应式原理,从数据劫持、依赖收集到更新视图的完整流程,帮助读者更好地理解Vue.js框架的工作方式。
|
16天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
14 0
|
17天前
|
Web App开发 JavaScript 前端开发
【Node.js】大前端技能最通俗易懂的讲解 快速入门必看
【Node.js】大前端技能最通俗易懂的讲解 快速入门必看
17 0
|
19天前
|
前端开发 JavaScript
前端JavaScript中的 == 和 ===区别,以及他们的应用场景,快来看看吧,积累一点知识。
等于操作符用两个等于号( == )表示,如果操作数相等,则会返回 true
|
19天前
|
前端开发 JavaScript
前端JavaScript中异步的终极解决方案:async/await
在深入讨论 async/await 之前,我们需要了解一下 JavaScript 的单线程和非阻塞的特性。JavaScript 是单线程的,也就是说在任何给定的时间点,只能执行一个操作。然而,对于需要大量时间的操作(例如从服务器获取数据),如果没有适当的管理机制,这种单线程特性可能会导致应用程序的阻塞。为了解决这个问题,JavaScript 引入了回调函数和后来的 Promise,用来管理这些异步操作。
|
6月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
81 0
|
6月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
54 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置

相关产品

  • 云迁移中心