js修改table中Td的值(定义td的单击事件)
/*
页面装载时,为每个td增加单击事件,这样,就可以不用对每个页面进行更改。
添加单击事件属性。此处不可使用setAttribute方法。
*/
onclick=AddObjOfText;
单击事件,将Td内容更新为一个Div,其中装载了一个Text,用于用户输入新的Td的值,
一个确定按钮,一个取消按钮,用于保存或取消用户的输入内容。
一个Hidden,保存用户输入新值前的Td的值,以便用户取消时恢复。
*/
function AddObjOfText()
{
var tdcag=document.getElementById("tdcag");
if(tdcag!=null)
{
return;
}
var tdid=window.event.srcElement;
var tdtxt=tdid.innerText;
var str="<div id='tdcag'><input type='text' id='txtId' value='"+tdtxt+"'>";
str+="<input type='button' value='确定' onclick='ChangeTdText()'>";
str+="<input type='button' value='取消' onclick='CancelTdChanged()'>";
str+="<input type='hidden' id='tdInitValue' value='"+tdtxt+"'>";
str+="</div>";
tdid.innerHTML=str;
}
/*
取消更改,把Hidden值赋给Td
*/
function CancelTdChanged()
{
var tdInitValue=document.getElementById("tdInitValue");
var tdtxt=tdInitValue.value;
var tdid=document.getElementById("tdcag").parentNode;
tdid.innerText=tdtxt;
}
/*
保存用户更改,把Text值赋值给Td
*/
function ChangeTdText()
{
var txtId=document.getElementById("txtId");
var tdid=document.getElementById("tdcag").parentNode;
tdid.innerText=txtId.value;
}
链接:https://www.jb51.net/article/33171.htm
修改如下:
如下完整代码::
1.创建id名为tdcag的DIV,内部为input输入栏(添加聚焦/离焦事件),用来接收用户输入的数值,放在该td中
2.离焦时间中添加对应操作,最后一步innerHTML赋值,将生成的id名为tdcag的div覆盖,显示最终结果
用window获得的td,会报错跨域请求::解决方法:传输this获得该td
onblur=fun();是触发离焦事件
$("#txtId").unbind("input propertychange").bind("input propertychange",function(){......此处是监听数值变动实时触发})
如下修改调整为::数值改变可以实时观看其他关联数值变动
循环表格中某一td,得出总数如下::
js修改table中Td的值(定义td的单击事件)的更多相关文章
- js导出table中的EXCEL总结
导出EXCEL通常是用PHP做,可是项目中,有时候PHP后端project师返回的数据不是我们想要的,作为前端开发project师,把相应的数据编号转换为文字后,展示给用户.可是.需求要把数据同一时候 ...
- js修改html中class属性
document.getElementById("tr").setAttribute("class","styleclass"); 其中 ...
- 不修改模板的前提下修改VisualState中的某些值
原文链接:不修改模板的前提下修改VisualState中的某些值 - 超威蓝火 UWP里有一件非常令人不爽的事,大部分控件只提供了Normal状态下的Background,Foreground,Bor ...
- JS修改标签中的文本且不影响其中标签
/********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明: * ...
- 【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数
一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redi ...
- js实现table中前端搜索(模糊查询)
项目中用到js前端搜索功能,根据 姓名或姓名 进行 搜索,实现方法如下,遍历table所有行中的某列,符合条件则置tr为display:'',不满足条件置tr为display:none. 代码如下: ...
- js操作table中tr的顺序,实现上移下移一行的效果
总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了 ...
- JS 遍历JSON中每个key值
JS 遍历JSON中的每个key值,可以按键值对进行存储: var myVar = { typeA: { option1: "one", option2: "two&qu ...
- 使用js合并table中的单元格
用primefaces做的报表,领导要求合并相同内容的单元格,但是primefaces没有找到可以合并单元格的组件,想来想去,只有页面加载后用js合并了. http://blog.csdn.net/d ...
随机推荐
- 计时器setTimeout()
setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次. 语法: setTimeout(代码,延迟时间); 参数说明: 1. 要调用的函数或要执行的代码串. 2. 延时时 ...
- 运用PowerDesigner的反向工程,可以导入SQL脚本,从而生成物理模型
运用PowerDesigner的反向工程,可以导入SQL脚本,从而生成物理模型.方法/步骤 首先打开PowerDesigner,点击左上角“File”—>"Reverse Engine ...
- android 网络广播 类似QQ动态检查网络
private ConnectivityManager mConnectivityManager; private NetworkInfo netInfo; 在onCreate 注册广播 Intent ...
- [UE4]使用UFUNCTION注意事项
#pragma once #include "CoreMinimal.h" #include "Blueprint/UserWidget.h" #include ...
- log4j自带的两个类MDC和NDC作用以及用途
原文转载至: https://blog.csdn.net/joeyon/article/details/52982330 要想实现获取IP并显示在log中必须先了解log4j自带的两个类MDC和NDC ...
- 获取地图文档(*.mxd)中比例尺问题
地图比例尺的概念是建立在有投影坐标系的空间参考前提下,将地图缩放到一定大小的比例值. 在多数情况下,我们都是将一个地图文档(*.mxd)加载到地图控件中(AxMapControl)显示出来,照此去获取 ...
- boost 学习笔记 1: lexical_cast
参考原著地址:http://einverne.github.io/post/2015/12/boost-learning-note-1.html 转换对象要求 lexical_cast 对转换对象有如 ...
- vs code编辑器使用教程指南
1.安装插件: 这里可以搜索到插件并安装. 2.修改快捷键或查找快捷键: 这里可以进行快捷键的查找和修改 3.进入引用文件: 点击f12,或者右击快捷键可以看到进入引用文件的快捷方法. 4.查看目录:
- 使用nginx secure_link指令实现下载防盗链
一.安装nginx并检查是否已安装模块 [root@img_server ~]# nginx -V #输出nginx所有已安装模块,检查是否有ngx_http_secure_link_module 二 ...
- Ddr2,ddr3,ddr4内存条的读写速率
理论极限值是可以计算的:1333MHz * 64bit(单通道,双通道则128bit) / 8(位到字节单位转换) = 10.664GB/s.这只是理论,实际发挥还要看内存控制器,实际上1333单条跑 ...