`

jquery 双击表格单元格编辑输入

 
阅读更多
	 	$("#table").find("td").bind("dblclick",function(){
	 		var input ="<input type='text' id='temp' value="+$(this).text()+" >";
	 		$(this).text("");
	 		$(this).append(input);
	 		$("input#temp").focus();
	 		$("input").blur(function(){
	 			if($(this).val()==""){
	 				$(this).remove();
	 			}else{
	 				$(this).closest("td").text($(this).val());
	 			}
	 		});

 

   	<table border="1" width="200" id="table">
		<tr><td>111</td></tr>
		<tr><td>222</td></tr>
		<tr><td>333</td></tr>
		<tr><td>444</td></tr>
		<tr><td>555</td></tr>
 	</table>

 xx

  • 大小: 1.3 KB
分享到:
评论

相关推荐

    jQuery编辑表格+JS日历【升级版】

    在本项目中,我们主要关注的是"jQuery编辑表格+JS日历【升级版】",这是一个结合了数据编辑和日历功能的Web应用组件。这个升级版相较于之前的版本,不仅在视觉效果上进行了美化,提高了用户体验,而且还添加了登录...

    jQuery 实现双击编辑表格功能

    当用户完成编辑并离开输入框(即输入框失去焦点)时,我们需要捕获这个事件,并将输入框的值更新回表格单元格: ```javascript var inputDom = $(this).find("input"); inputDom.blur(function() { var newText...

    jquery添加表格行内编辑代码.zip

    当用户点击编辑按钮或双击单元格时,可以隐藏原始文本并显示输入框(如`&lt;input&gt;`或`&lt;textarea&gt;`),让用户输入新值。输入完成后,可以通过`.blur()`事件监听输入框失去焦点,此时保存新值,并恢复表格的显示状态。 ...

    jgrid cellEdit 单元格编辑模式

    jGrid,作为一款强大的JavaScript表格插件,为开发者提供了丰富的功能,其中cellEdit单元格编辑模式尤其受到青睐。本文将深入探讨jGrid的cellEdit模式,包括其基本原理、配置选项以及实际应用中的技巧,旨在帮助...

    jquery将table表格变成可编辑

    本文将深入探讨如何使用jQuery将一个普通的HTML表格(Table)转换为可编辑的表格,让用户可以直接在表格单元格(TD)内进行编辑。 首先,我们需要了解HTML表格的基本结构。HTML表格由`&lt;table&gt;`标签开始,内部包含`...

    jquery php+mysql 表格双击可编辑,表单失去焦点自动提交保存数据

    2. **双击编辑**:在前端,当用户双击表格的某个单元格时,jQuery会捕获这个事件,将单元格内容转换为可编辑的表单输入,这通常通过添加`contenteditable`属性到HTML元素来实现。双击编辑功能提高了用户体验,使得...

    jquery编辑表格

    3. **编辑模式**:可以使用`&lt;input&gt;`元素或者`contenteditable`属性让表格单元格变为可编辑。例如,`$("td").attr("contenteditable", "true")`会让所有单元格可编辑。 4. **数据保存**:当用户完成编辑并提交时,...

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

    当用户双击表格中的单元格时,触发相应的处理函数。 4. **动态插入和替换元素**:在双击事件触发时,我们需要将TD内的文本替换为一个INPUT输入框。这可以通过`.html()`或`.append()`方法实现,例如`$(this).html('$...

    jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

    知识点三:单元格编辑状态控制 在 `onDblClickRow` 事件处理函数内部,首先调用 `endEdit` 方法来结束之前的编辑状态,然后调用 `beginEdit` 方法让当前行进入编辑模式。通过 `endEdit` 和 `beginEdit` 方法的调用,...

    jQuery+Bootstrap表格内容修改删除编辑插件.zip

    1. **内容修改**:通过监听表格单元格的双击事件,jQuery可以弹出一个模态框让用户输入新的值。输入完成后,利用jQuery的DOM操作,将新的值更新到对应的表格单元格中。 2. **删除功能**:在每一行数据旁边设置一个...

    jquery可编辑性表格

    用户可以直接在表格单元格中编辑数据,而这些变化会立即反映在表格上,无需页面刷新。这种特性对于数据管理、报表编辑等场景非常有用,尤其在大数据量时,避免了全页刷新带来的性能损耗。 ### 三、实现原理 1. **...

    jquery 编辑table实例

    本教程将深入探讨如何使用 jQuery 实现表格(table)的编辑功能,包括“一行编辑”和“双击编辑单元格”两种常见实例。 **一、一行编辑** 1. **创建HTML结构**:首先,我们需要一个基本的HTML表格结构,包含表头...

    jQuery+PureCSS可编辑表格插件.zip

    通过jQuery,这个脚本可以监听到表格单元格的点击事件,将普通的显示模式切换到编辑模式,允许用户直接在单元格内输入数据。此外,它还处理了数据的保存和撤销操作,确保用户可以方便地修改和管理表格内容。 对于有...

    js/jquery图形表格类特效,组件

    8. **编辑与表单集成**:在某些场景下,表格单元格可能需要编辑功能。这种组件允许用户直接在表格内修改数据,并可能与后端数据库同步。 9. **分页**:当表格数据量过大时,分页功能显得尤为重要。它将大量数据分割...

    .net 双击td可以编辑

    标题中的".net 双击td可以编辑"是一个关于.NET框架下使用JavaScript实现表格(table)单元格(td)双击编辑功能的技术点。在Web应用中,用户界面的交互性通常是一个关键因素,允许用户通过双击某个元素来激活编辑...

    PHP+jQuery实现双击修改table表格功能示例

    `$("tbody&gt;tr&gt;td").dblclick(function() {...})`监听了所有表格单元格的双击事件。当用户双击单元格时,首先获取当前单元格内输入框的初始值(原值),然后获取单元格的特定属性(例如,"user_name"或"user_sex"),...

    用js制作的可编辑表格

    在JavaScript中,当用户双击表格的某个单元格时,我们可以触发编辑模式。这可以通过检查`event`对象的`type`属性来实现,如果`type`为`dblclick`,则表示用户进行了双击操作。接下来,我们将该单元格的`...

    JQueryEasyUI的增删查改

    例如,可以创建一个按钮,点击后弹出一个对话框,让用户输入新记录的信息,然后使用`datagrid`的`append`方法将新记录添加到表格中。同时,需要确保后台的数据服务能处理这个新增请求并保存到数据库。 接着,"查"的...

    利用jQuery与PureCSS实现的可编辑表格源码.zip

    4. **动画效果**:jQuery提供了丰富的动画效果,如淡入淡出、滑动等,可以增强用户体验,比如在单元格编辑时显示或隐藏编辑框。 接下来,PureCSS在这个项目中的作用主要体现在界面的布局和样式上: 1. **响应式...

    bootstrap table实现单击单元格可编辑功能

    首先,要启用Bootstrap Table的单元格编辑功能,你需要在HTML文件中引入以下依赖库: 1. Bootstrap CSS和JavaScript库,用于基础的样式和交互效果。 2. Bootstrap Table的CSS和JavaScript文件,提供表格组件和功能...

Global site tag (gtag.js) - Google Analytics