JS动态创建TABLE双击可编辑状态

最新推荐文章于 2024-02-27 16:01:06 发布

lys07962000

最新推荐文章于 2024-02-27 16:01:06 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/lys07962000/article/details/34827181

web 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的表格编辑器中的双击编辑功能实现方法。通过JavaScript代码，在用户双击表格单元格时，单元格内容会被替换成一个包含原始值的文本框，允许用户直接编辑内容。此外，还介绍了如何在文本框失去焦点时将修改后的值保存回单元格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考： http://www.cnblogs.com/sixiweb/archive/2009/03/07/1405513.html

var existTR=document.getElementById("newTR"+row);
var existTd0=null;

existTd0.ondblclick=function(){OnEditCells(this)};

。。。

//当用户双击单元格的时候，单元格内显示textbox，value为原来单元格中的值

//如果用户再次双击单元格的时候，就会出问题，textbox中的内容就乱了。如何防止，我还没想出来。

function OnEditCells(thisCells)

{

thisCells.innerHTML="<input type=\"text\" id=\"TextBox1"+thisCells.id+"\" value=\""+thisCells.innerHTML+"\" onblur=\"thisTextBoxOnblur(this)\" />";
document.getElementById("textBox1"+thisCells.id).focus();

}

//当文本框失去焦点后，将修改后的值保存到隐藏控件中。并将单元格的内容变回原来的内容。

function thisTextBoxOnblur(thisTextBox)
{
    var thisCellsID=thisTextBox.id;
    thisCellsID=thisCellsID.substring(8,11);
    document.getElementById("HValue").value=thisTextBox.value;
    document.getElementById(thisCellsID).innerHTML=document.getElementById("HValue").value;
}