$(".edittable tr td").click(function(){
$(this).html('<input type="text" id="tableedit"value='+$(this).text()+">").children("#tableedit").focus().blur(function(){
$(this).parent().text($(this).val()).mouseleave(function(){
$(this).data("fileds",$(this).index());
$(this).data('id',$(this).parent().index()) ;
$(this).data('contents',$(this).text());
$(this).ajax({
url:"test.php",
type="POST",
data:{
fileds: $(this).data('fileds'),
id:$(this).data('id'),
contents:$(this).data('contents')
}
}) //提交到服务器处理
$(this).unbind("mouseleave"); //解除单元格鼠标离开绑定
});
});
});
=====html==
<table class="edittable">
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>
分享到:
相关推荐
在Bootstrap中,表格(Table)是常见的数据展示组件,而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展,它允许用户直接在表格内进行编辑,提供了更加交互式的用户体验。 Bootstrap表格的...
先简单说明一下,这个Demo...IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a
在IT行业中,尤其是在网页开发领域,可编辑表格的实现是一个常见的需求。"可编辑表格js代码" 提供了一种高效且灵活的解决方案,允许用户直接在网页上对表格数据进行编辑,极大地提升了交互性和用户体验。下面我们将...
"jquery可编辑表格插件"就是基于jQuery的一种工具,旨在为网页中的表格提供动态编辑功能,使得用户可以直接在表格中进行数据的增删改查,极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用,...
总结一下,jQuery实现可编辑表格主要涉及以下步骤: 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式,使输入框融入表格。 3. 使用jQuery监听事件,实现表格单元格的编辑和保存功能。 这个简单的示例展示了...
Bootstrap可编辑表格是一种基于Bootstrap框架实现的交互式表格,它允许用户在表格内直接编辑数据,无需跳转页面或打开新窗口。这种功能对于数据管理、CRUD操作(创建、读取、更新、删除)非常实用,尤其适用于后台...
在MATLAB开发中,TLAB库提供了一种高级的数据可视化工具——可编辑表格。这种功能使得用户能够在图形界面中直接操作数据,进行编辑、查看和分析,极大地提升了交互性和效率。下面将详细介绍这个功能及其应用。 一、...
本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格,允许用户双击单元格(TD元素)进行编辑,编辑完成后,数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...
【标题】"原创-javascript服务器交互型可编辑表格"是一个关于使用JavaScript实现与服务器进行交互的动态、可编辑表格的技术分享。在这个项目中,开发者利用JavaScript的灵活性和强大的功能,创建了一个用户可以直接...
**jQuery+PureCSS可编辑表格插件** 这款插件结合了jQuery的动态功能和PureCSS的简洁设计,为网页开发者提供了一种简单易用的可编辑表格解决方案。它允许用户直接在表格中编辑数据,提高了交互性和用户体验。下面将...
基于vue的可编辑表格 很多时候我们需要直接编辑表格内容,这个组件刚好解决了需求
EXT 可编辑 表格的例子 EXT 可编辑 表格的例子
在提供的压缩包文件"VC2010-08-25-VC6.0中基于MSFlexGrid的可编辑表格的制作及其若干问题的解决方案"中,很可能包含了具体的代码示例和解决这些问题的方法。通过学习这些示例,开发者可以更好地理解和掌握如何在VC...
总结,实现一个可编辑表格(表单)需要结合HTML、CSS、JavaScript以及可能的前端框架,与后端配合完成数据的提交和处理。通过这样的方式,我们可以创建出一个功能完备、用户体验良好的网页表单系统。
这个资源,"在线编辑表格 html格式可编辑表格 javascript编写",提供了一个使用HTML和JavaScript实现的简单可编辑表格。JavaScript是一种强大的客户端脚本语言,常用于增强网页的动态功能,而HTML则是网页内容的基础...
在本文中,我们将详细解析如何使用Vue.js框架封装一个可编辑的表格插件。该插件允许用户在表格中进行单元格编辑,并能对表头进行任意合并,从而提供了强大的表格数据处理功能。 首先,我们需要了解该插件的基本结构...
【标题】"WebTableSetup(jsp网页可编辑表格)"是一个涉及到网页开发技术的主题,主要聚焦在如何在JSP(JavaServer Pages)环境中创建一个可编辑的表格。JSP是一种动态网页技术,允许开发者将Java代码嵌入到HTML页面中...
在本案例中,"用js制作的可编辑表格"是一个使用JavaScript实现的用户可以直接在网页上编辑表格内容的功能。这种功能在数据管理、信息展示和表单填写等场景下非常实用,因为它提供了直观且便捷的数据输入方式。 首先...