`
kennethf6986
  • 浏览: 69295 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

可编辑的表格

JavaScriptHTML 
阅读更多 

<html>
	<head>
		<script type="text/javascript">
			
			function setToInput(){
				var oNode=event.srcElement;
				if(oNode.childNodes.length<1) return;
				var oInput=document.createElement("INPUT");
				oInput.type="text";	
				oInput.onblur=setToTD;
				oInput.size=5;
				oNode.appendChild(oInput);
				oInput.value=oNode.innerText;
				oNode.childNodes[0].removeNode();	
				oInput.focus();
				oInput.select();
			}
			
			function setToTD(){
					var oNode=event.srcElement;
					if(oNode.tagName=="INPUT"){
						var oValue=document.createTextNode(oNode.value);
						if(oValue&&oValue.nodeValue){
							oNode.parentNode.innerText = oValue.nodeValue;
						}else{
							oNode.parentNode.innerText = " ";
						}
						oNode.removeNode();
					}
			}				
		</script>		
	</head>
	
<body>
<h5>可编辑的表格</h5>
<table border=1>
	<tr>
		 <td height='25px' width='50px'  align='center' onclick="setToInput();">0</td>	
		 <td width='30px' onclick="setToInput();">2</td>
	</tr>	
	<tr>
		 <td onclick="setToInput();">2</td>	
		 <td onclick="setToInput();">2</td>		
	</tr>	
</table>
</body>
</html>
 
分享到：
| js全角字符转为半角大写
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    可编辑表格

    在IT领域，"可编辑表格"是一个非常实用的功能，它广泛应用于数据管理、数据分析和信息组织。无论是电子表格软件如Microsoft Excel，还是在线协作工具如Google Sheets，这种功能都为用户提供了极大的便利。下面我们将...

    bootstrap插件_table可编辑表格_demo

    在Bootstrap中，表格（Table）是常见的数据展示组件，而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展，它允许用户直接在表格内进行编辑，提供了更加交互式的用户体验。 Bootstrap表格的...

    vue+iview 实现可编辑表格的示例代码

    先简单说明一下,这个Demo...IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a

    可编辑表格js代码

    在IT行业中，尤其是在网页开发领域，可编辑表格的实现是一个常见的需求。"可编辑表格js代码" 提供了一种高效且灵活的解决方案，允许用户直接在网页上对表格数据进行编辑，极大地提升了交互性和用户体验。下面我们将...

    jquery可编辑表格插件

    "jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...

    jQuery实现可编辑表格

    总结一下，jQuery实现可编辑表格主要涉及以下步骤： 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式，使输入框融入表格。 3. 使用jQuery监听事件，实现表格单元格的编辑和保存功能。 这个简单的示例展示了...

    bootstrap可编辑表格完整代码

    Bootstrap可编辑表格是一种基于Bootstrap框架实现的交互式表格，它允许用户在表格内直接编辑数据，无需跳转页面或打开新窗口。这种功能对于数据管理、CRUD操作（创建、读取、更新、删除）非常实用，尤其适用于后台...

    matlab开发-TLAB中的可编辑表格

    在MATLAB开发中，TLAB库提供了一种高级的数据可视化工具——可编辑表格。这种功能使得用户能够在图形界面中直接操作数据，进行编辑、查看和分析，极大地提升了交互性和效率。下面将详细介绍这个功能及其应用。 一、...

    基于jquery的可编辑表格实现代码

    本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格，允许用户双击单元格（TD元素）进行编辑，编辑完成后，数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...

    原创-javascript服务器交互型可编辑表格

    【标题】"原创-javascript服务器交互型可编辑表格"是一个关于使用JavaScript实现与服务器进行交互的动态、可编辑表格的技术分享。在这个项目中，开发者利用JavaScript的灵活性和强大的功能，创建了一个用户可以直接...

    jQuery+PureCSS可编辑表格插件

    **jQuery+PureCSS可编辑表格插件** 这款插件结合了jQuery的动态功能和PureCSS的简洁设计，为网页开发者提供了一种简单易用的可编辑表格解决方案。它允许用户直接在表格中编辑数据，提高了交互性和用户体验。下面将...

    vue可编辑表格

    基于vue的可编辑表格 很多时候我们需要直接编辑表格内容，这个组件刚好解决了需求

    EXT 可编辑 表格的例子

    EXT 可编辑 表格的例子 EXT 可编辑 表格的例子

    【JavaScript源代码】vue 中使用 vxe-table 制作可编辑表格的使用过程.docx

    在Vue项目中，当面临需要实现可编辑表格的需求时，开发者通常会遇到性能问题，特别是在数据量较大的情况下。本文将详细介绍如何使用`vxe-table`库来创建一个高效的可编辑表格，以解决类似的问题。 首先，`vxe-table...

    VC6.0中基于MSFlexGrid的可编辑表格的制作及其若干问题的解决方案C++源

    在提供的压缩包文件"VC2010-08-25-VC6.0中基于MSFlexGrid的可编辑表格的制作及其若干问题的解决方案"中，很可能包含了具体的代码示例和解决这些问题的方法。通过学习这些示例，开发者可以更好地理解和掌握如何在VC...

    可编辑表格（表单）简易实现

    总结，实现一个可编辑表格（表单）需要结合HTML、CSS、JavaScript以及可能的前端框架，与后端配合完成数据的提交和处理。通过这样的方式，我们可以创建出一个功能完备、用户体验良好的网页表单系统。

    在线编辑表格 html格式可编辑表格 javascript编写

    这个资源，"在线编辑表格 html格式可编辑表格 javascript编写"，提供了一个使用HTML和JavaScript实现的简单可编辑表格。JavaScript是一种强大的客户端脚本语言，常用于增强网页的动态功能，而HTML则是网页内容的基础...

    Vue封装的可编辑表格插件方法

    在本文中，我们将详细解析如何使用Vue.js框架封装一个可编辑的表格插件。该插件允许用户在表格中进行单元格编辑，并能对表头进行任意合并，从而提供了强大的表格数据处理功能。 首先，我们需要了解该插件的基本结构...

    WebTableSetup(jsp网页可编辑表格).rar

    【标题】"WebTableSetup(jsp网页可编辑表格)"是一个涉及到网页开发技术的主题，主要聚焦在如何在JSP（JavaServer Pages）环境中创建一个可编辑的表格。JSP是一种动态网页技术，允许开发者将Java代码嵌入到HTML页面中...

Magicbox
Global site tag (gtag.js) - Google Analytics