<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单击单元格，将其变为文本框--jsdoc.cn</title>
<style type="text/css">
<!--
body{font-size:12px;}
td {
border-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: solid;
text-align: center;
width: 25%;
height: 20px;
}
table {
border-width:1px;
border-right-style: solid;
border-bottom-style: solid;
border-top-style: none;
border-left-style: none;
border-color:#000;
}
.text { width: 95%;border: 1px dashed #FF9900; }
-->
</style>
<script language="javascript">
// 将单元格转化成文本框
function changeTotext(obj)
{
var tdValue = obj.innerText;
obj.innerText = "";
var txt = document.createElement("input");
txt.type = "text";
txt.value = tdValue;
txt.id = "_text_000000000_";
txt.setAttribute("className","text");
obj.appendChild(txt);
txt.select();
//obj.style.border = "1px dashed #ff9900";
}
// 取消单元格中的文本框，并将文本框中的值赋给单元格
function cancel(obj)
{
var txtValue = document.getElementById("_text_000000000_").value;
obj.innerText = txtValue;
}
/*********************************************/
// 事件
document.ondblclick = function()
{
if (event.srcElement.tagName.toLowerCase() == "td")
{
changeTotext(event.srcElement);
}
}
document.onmouseup = function()
{
if (document.getElementById("_text_000000000_") && event.srcElement.id != "_text_000000000_")
{
var obj = document.getElementById("_text_000000000_").parentElement;
cancel(obj);
}
}
</script>
</head>
<body>
<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>dblclick</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
### JavaScript 实现表格单元格双击变为可编辑文本框 #### 概述 在Web开发中，有时我们需要让用户能够方便地编辑表格中的数据。一种常见的做法是通过双击表格单元格将其转换为一个可编辑的文本框。这种方法既提高...
"bootstrap table实现双击可编辑、添加、删除行功能" Bootstrap Table是基于Bootstrap的表格插件，提供了丰富的功能和高效的渲染性能。今天，我们将详细介绍如何使用Bootstrap Table实现双击可编辑、添加、删除行...
标题中的".net 双击td可以编辑"是一个关于.NET框架下使用JavaScript实现表格（table）单元格（td）双击编辑功能的技术点。在Web应用中，用户界面的交互性通常是一个关键因素，允许用户通过双击某个元素来激活编辑...
在双击事件处理函数中，将表格单元格内容替换为一个文本输入框，允许用户编辑内容。 3. 表单和输入事件处理 当输入框获得焦点时，它触发"focus"事件，并在失去焦点时触发"blur"事件。在"blur"事件中，代码获取新的...
当用户双击一个单元格时，该单元格将变为可编辑状态，即变为一个输入框（input）。以下是如何实现这一功能的 JavaScript 代码： ```javascript $(document).ready(function() { $(".tables").on("dblclick", "td",...
本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格，允许用户双击单元格（TD元素）进行编辑，编辑完成后，数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...
当用户点击编辑按钮或双击单元格时，可以隐藏原始文本并显示输入框（如`<input>`或`<textarea>`），让用户输入新值。输入完成后，可以通过`.blur()`事件监听输入框失去焦点，此时保存新值，并恢复表格的显示状态。 ...
9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二） 第10章 单选框和...
9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二） 第10章 单选框和...
// 设置输入框的初始值为当前单元格的文本 input.val($(this).text()); // 将单元格的内容替换为输入框 $(this).empty().append(input); // 添加输入框失去焦点时的事件处理器 input.blur(function() { /...
《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器，充分向读者演示了如何使用jQuery的各项技术，实现令人激动的网页效果。 《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发，对最实用的...
双击后，单元格内容变为文本输入框，用户可以修改数据。当输入框失去焦点（`blur`事件）时，新的数据会被保存回表格，通常会更新到相应的数据模型中。 再者，随机数据生成确保每次刷新页面时，表格显示的数据都是...
如果不存在文本框，则会在td内部创建一个div元素，其中包含一个文本输入框（input type="text"）和一个隐藏的input用于存储单元格原始数据。同时，将div元素插入到td中，并将文本框获得焦点。 为了方便用户输入，...
上述代码段会在用户双击表格中的单元格时将单元格中的内容替换为文本输入框，允许用户编辑内容。当编辑完成并失去焦点时，输入框将被替换回普通文本。 综上所述，通过JavaScript实现添加和删除表格行以及双击变...
当用户双击表格的某一行时，会从双击的行中获取第一个单元格（td）的文本值，这个值代表了用户想要选择的数据项。获取到值之后，对话框会重新隐藏（将display属性值设为'none'），并且将选中的文本值设置到输入框...
编辑模式下，隐藏的输入元素变为可见，原始的文本内容被放入输入框。 ```javascript $(document).ready(function() { $('#editTable tbody tr').on('click', function() { $(this).find('td input[type="text"]')...