客户需求至上。

这次是更改后的代码,去掉了“确定”,“取消”按钮。变单击为双击事件,用户按ESC键,取消更改。

//为每个Td添加双击事件

function ReWritable()

{

var tbmian=document.getElementById("tbmain");

//循环,为每行每列添加双击事件,但是,第一行(thead)与最后一行(tfoot)不添加。

for(var i=1;i

{

for(var j=0;j

{

tbmain.rows[i].cells[j].οndblclick=TdDoubleClick;

}

}

}

//定义td的双击事件,为其添加文本框,使用用户可以输入。

function TdDoubleClick()

{

//首先判断是不是该方格已经存在文本框,如果存在,则返回,不重复添加文本框。如果不存在,则添加。

var tdcag=document.getElementById("tdcag");

var tdid=null;

var txtid=null;

var curtd=window.event.srcElement;

if(tdcag!=null)//已经存在,返回。

{

return;

}

//不存在,则添加

tdid=window.event.srcElement;

tdtxt=tdid.innerText;

tdtxt=Trim(tdtxt);

var str="

";

str+="";

str+="

";

tdid.innerHTML=str;

//使文本框获得焦点。

document.getElementById("txtId").focus();

var ctr=document.getElementById("txtId").createTextRange();

ctr.collapse(false);

ctr.select();

}

//去除字符串前后的空格。

function Trim(str)

{

return str.replace(/(^\s*)|(\s*$)/g, "");

}

//定义KeyPress按下时的事件,如果是ESC键,则取消更改,恢复为更改前的值。

document.onkeypress = function EscKeyPress()

{

if(event.keyCode==27)

{

CancelTdChanged();

return;

}

}

//取消更改,

function CancelTdChanged()

{

var tdInitValue=document.getElementById("tdInitValue");

var tdtxt=tdInitValue.value;

var tdid=document.getElementById("tdcag").parentNode;

tdid.innerText=Trim(tdtxt);

}

//确定更改,

function ChangeTdText()

{

var txtId=document.getElementById("txtId");

if(txtId==null)

{

return;

}

var tdid=document.getElementById("tdcag").parentNode;

tdid.innerText=Trim(txtId.value);

return;

}

其它代码,与以前相同。只是取消了对表的Thead与Tfoot的更改。

thead,thead,thead

tfoot,tfoot,tfoot

111213212223313233

html 表格双击事件,js修改table中Td的值(定义td的双击事件)相关推荐

  1. js修改table字体及表格边框样式

    1.实例:js修改table字体及table边框样式 以下为完整代码 <!DOCTYPE html> <html> <head><meta http-equi ...

  2. JQuery实例(三)- 动态修改Table中的内容

    在第一个例子中,二级联动,改变省份的时候,会动态修改另一个下拉框的内容. 这里修改为,改变一个Table中的内容. <%@ page language="java" cont ...

  3. html里table的遍历,js遍历table中的tr

    js遍历table中的tr function tt(){ var table1=document.getElementById('table1'); //节点只支持getElementsByTagNa ...

  4. JS修改标签中的文本且不影响其中标签

    /********************************************************************** JS修改标签中的文本且不影响其中标签* 说明:* 需要修 ...

  5. js替换字符串某个字符,js修改字符串中指定字符

    平时用到elementui时,经常遇到多级树形结构,但是后端往往给前端反的每一级字段不一致,如果写个遍历循环将其改为一致麻烦的,不如直接将后台发的数组转为字符串,再将字符串中不一致的字段替换成一致的即 ...

  6. Jquery和JS获取Table中tr标签的值以及赋值问题

    Jquery和JS获取Table中tr标签的值以及赋值 业务场景:根据 类型,给比例赋值,是当前td比例动态变化:废话少说,直接上代码 1.以下是HTML代码; <div class=" ...

  7. B09_NumPy迭代数组(控制遍历顺序,修改数组中元素的值,使用外部循环,广播迭代)

    NumPy迭代数组 NumPy 迭代器对象 numpy.nditer 提供了一种灵活访问一个或者多个数组元素的方式. 迭代器最基本的任务的可以完成对数组元素的访问. 接下来我们使用arange()函数 ...

  8. 面试题-js获取cookie中存储的值?

    js获取cookie中存储的值? 1.cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是Jav ...

  9. js操作table中tr的顺序,实现上移下移一行的效果

    总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了 ...

最新文章

  1. 用python画爱心-python画一个玫瑰和一个爱心
  2. 微信红利末期,新媒体运营除了打造10W+还应该做什么?
  3. PyTorch随笔-4
  4. 猪八戒玉华王:老码农的7项灵魂思考
  5. tree(nyoj)
  6. 工欲善其事必先利其器,用Emmet提高HTML编写速度
  7. [渝粤教育] 西南科技大学 操作系统 在线考试复习资料
  8. 轻松看懂概率论与图论基础数学知识
  9. 慕课网 jupyter notebook魔法方法学习小记
  10. 立即执行的js插件,转成可以在VUE环境下使用,
  11. 加不了buff的BuffX,还能让年轻人买单多久?
  12. Android 怎样默认打开便携式WIFI热点 M
  13. 小项目:收支记账和客户关系管理
  14. JAVA导出exls时报oom,Poi导出产生OOM解决方案
  15. IOS微信内置浏览器音频加载问题
  16. 浏览器的收藏夹的导入导出
  17. VSRX防火墙安装与部署
  18. 我做了一个艰难的决定
  19. uni-app - 电子签字板组件(签名专用写字画板,支持调整写字板 “横纵“ 方向,可调整线条粗细颜色等,Canvas 绘制非常丝滑流畅)完美兼容 H5 APP 小程序,最好用的画板签字教程插件源码
  20. Vs13 开发水晶报表

热门文章

  1. php微信照相机,用微信拍照时怎么打开原生相机?(Android)| 有轻功
  2. Mysql 配置文件 my.cnf 参数详情参考
  3. 凯立德2014秋季机车版C1204-C7K05-3323J0L懒人包 (5.0版)
  4. Android 壁纸横屏显示一半黑屏
  5. 详解K-Means算法
  6. java调用腾讯云的短信接口
  7. JAVA-扶摇直上九万里(初学篇)
  8. 【编程】语法糖、语法盐、语法糖精、语法海(hexie)洛(hexie)因(hexie)
  9. centos678搭建私有仓库
  10. elementui组件—— el-scroll的使用