码迷,mamicode.com
首页 > Web开发 > 详细

js修改table中Td的值(定义td的单击事件)

时间:2018-09-07 14:17:32      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:table   add   innerhtml   取消   .net   NPU   ret   get   链接   

/*
页面装载时,为每个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

js修改table中Td的值(定义td的单击事件)

标签:table   add   innerhtml   取消   .net   NPU   ret   get   链接   

原文地址:https://www.cnblogs.com/mangwusuozhi/p/9603814.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!