html 表格双击事件,js修改table中Td的值(定义td的双击事件)
客户需求至上。
这次是更改后的代码,去掉了“确定”,“取消”按钮。变单击为双击事件,用户按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的双击事件)相关推荐
- js修改table字体及表格边框样式
1.实例:js修改table字体及table边框样式 以下为完整代码 <!DOCTYPE html> <html> <head><meta http-equi ...
- JQuery实例(三)- 动态修改Table中的内容
在第一个例子中,二级联动,改变省份的时候,会动态修改另一个下拉框的内容. 这里修改为,改变一个Table中的内容. <%@ page language="java" cont ...
- html里table的遍历,js遍历table中的tr
js遍历table中的tr function tt(){ var table1=document.getElementById('table1'); //节点只支持getElementsByTagNa ...
- JS修改标签中的文本且不影响其中标签
/********************************************************************** JS修改标签中的文本且不影响其中标签* 说明:* 需要修 ...
- js替换字符串某个字符,js修改字符串中指定字符
平时用到elementui时,经常遇到多级树形结构,但是后端往往给前端反的每一级字段不一致,如果写个遍历循环将其改为一致麻烦的,不如直接将后台发的数组转为字符串,再将字符串中不一致的字段替换成一致的即 ...
- Jquery和JS获取Table中tr标签的值以及赋值问题
Jquery和JS获取Table中tr标签的值以及赋值 业务场景:根据 类型,给比例赋值,是当前td比例动态变化:废话少说,直接上代码 1.以下是HTML代码; <div class=" ...
- B09_NumPy迭代数组(控制遍历顺序,修改数组中元素的值,使用外部循环,广播迭代)
NumPy迭代数组 NumPy 迭代器对象 numpy.nditer 提供了一种灵活访问一个或者多个数组元素的方式. 迭代器最基本的任务的可以完成对数组元素的访问. 接下来我们使用arange()函数 ...
- 面试题-js获取cookie中存储的值?
js获取cookie中存储的值? 1.cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是Jav ...
- js操作table中tr的顺序,实现上移下移一行的效果
总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了 ...
最新文章
- 用python画爱心-python画一个玫瑰和一个爱心
- 微信红利末期,新媒体运营除了打造10W+还应该做什么?
- PyTorch随笔-4
- 猪八戒玉华王:老码农的7项灵魂思考
- tree(nyoj)
- 工欲善其事必先利其器,用Emmet提高HTML编写速度
- [渝粤教育] 西南科技大学 操作系统 在线考试复习资料
- 轻松看懂概率论与图论基础数学知识
- 慕课网 jupyter notebook魔法方法学习小记
- 立即执行的js插件,转成可以在VUE环境下使用,
- 加不了buff的BuffX,还能让年轻人买单多久?
- Android 怎样默认打开便携式WIFI热点 M
- 小项目:收支记账和客户关系管理
- JAVA导出exls时报oom,Poi导出产生OOM解决方案
- IOS微信内置浏览器音频加载问题
- 浏览器的收藏夹的导入导出
- VSRX防火墙安装与部署
- 我做了一个艰难的决定
- uni-app - 电子签字板组件(签名专用写字画板,支持调整写字板 “横纵“ 方向,可调整线条粗细颜色等,Canvas 绘制非常丝滑流畅)完美兼容 H5 APP 小程序,最好用的画板签字教程插件源码
- Vs13 开发水晶报表
热门文章
- php微信照相机,用微信拍照时怎么打开原生相机?(Android)| 有轻功
- Mysql 配置文件 my.cnf 参数详情参考
- 凯立德2014秋季机车版C1204-C7K05-3323J0L懒人包 (5.0版)
- Android 壁纸横屏显示一半黑屏
- 详解K-Means算法
- java调用腾讯云的短信接口
- JAVA-扶摇直上九万里(初学篇)
- 【编程】语法糖、语法盐、语法糖精、语法海(hexie)洛(hexie)因(hexie)
- centos678搭建私有仓库
- elementui组件—— el-scroll的使用