<html>
<script language="javascript">
//为每个Td添加双击事件
function ReWritable()
{
var tbmian=document.getElementById("tbmain");
//循环,为每行每列添加双击事件,但是,第一行(thead)与最后一行(tfoot)不添加。
for(var i=1;i<tbmain.rows.length-1;i++)
{
for(var j=1;j<tbmain.rows[i].cells.length;j++)//第一列不添加
{
tbmain.rows[i].cells[j].ondblclick=TdDoubleClick;
}
}
}
//定义td的双击事件,为其添加文本框,使用用户可以输入。
function TdDoubleClick()
{
getOldChange();//添加旧的数据oldRecord
//首先判断是不是该方格已经存在文本框,如果存在,则返回,不重复添加文本框。如果不存在,则添加。
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="<div id='tdcag'><input type='text' onblur='ChangeTdText();' id='txtId' value='"+tdtxt+"'>";
str+="<input type='hidden' id='tdInitValue' value='"+tdtxt+"'>";
str+="</div>";
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);
getNewChange();//添加新的数据(未更改)
}
//确定更改,
function ChangeTdText()
{
var txtId=document.getElementById("txtId");
if(txtId==null)
{
return;
}
var tdid=document.getElementById("tdcag").parentNode;
tdid.innerText=Trim(txtId.value);
// alert(rowID);
getNewChange();//添加新的数据(已更改)
return;
}
var changeID=0;
var rowID;
var changeArr=new Array();
var oldRecord=new Array();
var newRecord=new Array();
function show(){
compare()
var otstr="<table border='1'>";
var ojstr="{check:[";
var ntstr="<table border='1'>";
var njstr="{check:[";
for( var i=0;i<changeArr.length;i++){
otstr+=oldRecord[i];
ojstr+=changeToJson(oldRecord[i])+",";
ntstr+=newRecord[i];
njstr+=changeToJson(newRecord[i])+",";
}
ojstr+="]}";
njstr+="]}";
otstr+="</table>";
ntstr+="</table>";
ojstr=ojstr.replace(/,]}/g,"]}");
njstr=njstr.replace(/,]}/g,"]}");
var contain=document.getElementById("div2");
contain.innerHTML=otstr+"\n"+ojstr+"\n";
var contain=document.getElementById("divnew");
contain.innerHTML=ntstr+"\n"+njstr;
}
function compare(){//去除修改的数据(又该回原值)
for( var i=0;i<changeArr.length;i++){
//alert(oldRecord[i]+"/"+newRecord[i]);
if(oldRecord[i]==newRecord[i]){
changeArr[i]="";
oldRecord[i]="";
newRecord[i]="";
}
}
}
function changeToJson(str){
if(str==undefined)
return;
str=str.replace(/<tr>/g,"{");
str=str.replace(/<\/tr>/g,"}");
str=str.replace(/<td>/g,"");
str=str.replace(/<\/td>/g,",");
str=str.replace(/,}/g,"}");
return str;
}
function getOldChange(){
var flag=true;
for( var i=0;i<changeArr.length;i++){
if(rowID==changeArr[i]){
flag=false;
}
}
if(flag==true){
changeArr[changeID]=rowID;
oldRecord[changeID]=getOneRecord(rowID);
changeID++;
}
}
function getNewChange(){
//alert(newRecord[changeID-1]+"\n"+getOneRecord(rowID));
newRecord[changeID-1]=getOneRecord(rowID);
//alert(newRecord[changeID-1]);
}
function getOneRecord(rid){
t=document.getElementById("tbmain");
row_num=t.rows.length;
cell_num=t.rows[0].cells.length;
var str=new String("");
for(var i=0;i<=row_num;i++){//
if(rid==i){
str="<tr>";
for(var j=0;j<=cell_num;j++){
str+="<td>"+t.rows[i].cells[j].innerHTML+"</td>";
}
str+="</tr>";
}
}
return str;
}
function leave(){
var msg="leave";
return msg;
}
//window.onbeforeunload=leave;
//window.onunload=leave;
</script>
<body onload="ReWritable();">
<table id="tbmain" style="width:100%;" border="1">
<thead>
<tr>
<td>thead,thead,thead</td><td>thead,thead,thead</td>
</tr>
</thead>
<tfoot>
<tr>
<td>
tfoot,tfoot,tfoot
</td>
<td>
tfoot,tfoot,tfoot
</td>
</tr>
</tfoot>
<tr onMouseDown="rowID=this.cells.item(0).innerHTML;">
<td style="display:none">
1
</td>
<td>12</td>
<td>13</td>
</tr>
<tr onMouseDown="rowID=this.cells.item(0).innerHTML;">
<td style="display:none">
2
</td>
<td>22</td>
<td>23</td>
</tr>
<tr onMouseDown="rowID=this.cells.item(0).innerHTML;">
<td style="display:none">
3
</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<input type="button" onclick="show();" value="show"/>
<div id="div2"></div><div id="divnew"></div>
</body>
</html>
分享到:
相关推荐
table双击td修改内容。纯手工,纯前端无后端。可以应用后端,不过需要自己修改样式。白嫖党:https://blog.csdn.net/qq_38508172/article/details/82660950
这个js工具方法是用来手动改变td 的文字长度,适用于任何js框架和普通table。方法简单,代码也不多。但是绝对实用。
代码如下: //为每个Td添加双击事件 function ReWritable() { var tbmian=document.getElementById(“tbmain”); //循环,为每行每列添加双击事件,但是,第一行(thead)与最后一行(tfoot)不添加。 for(var i=1;i...
单击事件,将Td内容更新为一个Div,其中装载了一个Text,用于用户输入新的Td的值,一个确定按钮,一个取消按钮,用于保存或取消用户的输入内容
JS+CSS+DIV+Table实现C#中DataGridView控件可修改单元格的值 点击Table中的TD弹出DIV..输入值点确认就可修改TD的值
JS+CSS+DIV+Table实现C#中DataGridView控件可修改单元格的值点击Table中的TD弹出DIV..输入值点确认就可修改TD的值
本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态。分享给大家供大家参考,具体如下: html部分: <table> ;>序号 班次 分组 操作 <td width=40px;>{{value.id }}</td> <td...
最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 ...
主要介绍了JS实现table表格内针对某列内容进行即时搜索筛选功能,涉及javascript针对HTML元素的遍历、属性动态修改相关操作技巧,需要的朋友可以参考下
成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table 概要代码如下:JS 代码如下://动态获取主题数据 function ...
本文实例讲述了JS实现动态修改table及合并单元格的方法。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
如果您调用的是<script language="javascript" src="/js/Std_StranJF.Js">,则将繁简互换JS文件(Std_StranJF.Js)上传至网站的js目录中。当然您也可以上传至网站的其他何地方,如根目录下。如果上传在网站根目录...
在开发的过程中,经常会遇到弹出框显示前一页table列表的情况,这时候会有好多方法来来解决,有的人可能会说重新查一遍数据显示,有的人会说直接用js将值拷贝过去,然后再修改,不过现在就介绍怎么用jquery将值拷贝...
">报送时间: 年 月 日</td></tr></table> <table cellspacing="0" class="pb">'; var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象 var columns = printDatagrid...
主体就是用一个Table, 控制其每一个td的class来实现的。 地址:http://www.topnorth.cn/upload/rects.html 或者打开 http://www.topnorth.cn 进javascript栏目,javascript俄罗斯方块里可以看到。 看看吧,现丑...
<td width="594" height="16" valign="top" background="/images/index_13.jpg"><script language='JavaScript' type='text/JavaScript' src='/Article/js/menu.js'></script> <script type='text/javascript' ...
本文实例讲述了JS实现控制表格内指定单元格内容对齐的方法。分享给大家供大家参考。具体如下: 下面的代码控制表格单元格的内容向右对齐 <!DOCTYPE html> <html> <head> [removed] function ...
Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/...