壹咪阳光
- 浏览: 116154 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
1脚本jqueryedit.js
//在页面装载时，让所有的td都有一个点击事件
$(document)ready(function()
{
//找到所有的td节点
var tds=$("td");
//给所有的td节点增加点击事伯
tds.click(function(){
//0保存当前的td节点
var td=$(this);
//1取出td里面的内容
var text=td.text();
//2清空td里面的内容
td.html("");//也可以用td.empty();
//3建立一个文本框，也就是input的元素节点
var input=$("<input>");
//4设置文本框的值是保存起来的文本内容
input.attr("value",text);//设置属性值
//4.5让文本框可以响应键盘按下事件，主要用于处理回车确认
input.keyup(function(event){
0.获取当前用户按下的键值
var myEvent=event||window.event;
var kcode=myEvent.keyCode;
1.判断是否是回车按下
if(kcode==13){
var inputnode=${this};
//2.保存当前文本框的内容
var inputtext=inputnode.val();
//3.清空td里面的肉容
var tdNode=inputnode.parent();
//4.将保存的文本框的空容填充到td中
tdNode.html(inputtext);
//5.让td重新拥有点击事件
tdNode.click();
}
});
//5将文本框加入到td中
td.append(input);//也可以用input.appendTo(td);加添节点
//5.5让文本框里面的文字被高亮选中
//需要将jquery的对象转换成dom对象
var inputdom=input.get(0);
inputdom.select();
//6移除点击事件
td.unbind("click");
});
});
2页面jqueryEdit.html
<html>
<head>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jqueryedit.js"></script>
<head>
<body>
<table border="1px">
<tr>
<td>123123</td>
<td>456456</td>
</tr>
</table>
</body>
</html>
//在页面装载时，让所有的td都有一个点击事件$(document)ready(function(){ //找到所有的td节点 var tds=$("td"); //给所有的td节点增加点击事伯 tds.click(function(){ //0保存当前的td节点 var td=$(this); //1取出td里面的内容 var text=td.text(); //2清空td里面的内容 td.html("");//也可以用td.empty(); //3建立一个文本框，也就是input的元素节点 var input=$("<input>"); //4设置文本框的值是保存起来的文本内容 input.attr("value",text);//设置属性值 //4.5让文本框可以响应键盘按下事件，主要用于处理回车确认 input.keyup(function(event){ 0.获取当前用户按下的键值 var myEvent=event||window.event; var kcode=myEvent.keyCode; 1.判断是否是回车按下 if(kcode==13){ var inputnode=${this}; //2.保存当前文本框的内容 var inputtext=inputnode.val(); //3.清空td里面的肉容 var tdNode=inputnode.parent(); //4.将保存的文本框的空容填充到td中 tdNode.html(inputtext); //5.让td重新拥有点击事件 tdNode.click(); } }); //5将文本框加入到td中 td.append(input);//也可以用input.appendTo(td);加添节点 //5.5让文本框里面的文字被高亮选中 //需要将jquery的对象转换成dom对象 var inputdom=input.get(0); inputdom.select(); //6移除点击事件 td.unbind("click"); });});
2页面jqueryEdit.html
<html><head><script type="text/javascript" src="jslib/jquery.js"></script><script type="text/javascript" src="jslib/jqueryedit.js"></script><head><body><table border="1px"> <tr> <td>123123</td> <td>456456</td> </tr></table></body></html>
分享到：
发表评论
-
javascript 中数组使用方法
2009-10-29 13:27 503/* 由于javascript是一种无类型语言,所以一个数 ... -
ajax基础
2009-11-03 10:10 655XMLHTTPRequest---->JavaScrip ... -
ajax基础-jquery
2009-11-03 10:12 810//---------------------------- ... -
正则基础
2009-11-03 10:16 607<html> <script> ... -
DWR-基本配置文件
2009-11-03 10:33 6631 dwr.xml <?xml version=&quo ... -
DWR-笔记
2009-11-03 10:36 354var xmlrequestXml; function cre ... -
DWR-util.js包工具方法
2009-11-03 10:41 958util.js包含一些有用的函数function,用于在客户端 ... -
DWR-返回-参数为Map
2009-11-03 10:43 638方法1： fuction test{ tt.hello( ... -
DWR-返回-参数为集合
2009-11-03 10:54 404DWR中处理List调用返回JavaBean的java方法 4 ... -
dwr模拟google suggest
2009-11-03 11:07 3961 web.xml <!------ AutoSugge ... -
正则基础2
2009-11-04 14:42 5091111-1234 re \d{5}(-\d{4})? ?指前 ... -
cookie.js
2009-11-04 15:42 588js读写cookie可以提高效率，现对代码作仔细说明，以备用： ... -
Event对象的属性
2009-11-29 21:37 470function MyAlert() { var msg=&q ... -
javascript DOM
2009-11-29 21:51 489<!------------------///事件处理 ... -
javascript语法_函数_对象_数组
2009-11-29 21:52 379<script language="javas ... -
事件显示声明
2009-11-29 21:55 717<script type=text/javascript ... -
LavaLamp mean
2009-12-06 23:18 607具有flash效果的菜单，基于jquery Download ... -
ajax 书签
2009-12-30 15:17 651框架: Yahoo UIProtoTypeJQueryOpen ... -
给Dreamweaver安装jQuery插件jQuery_API.mxp
2010-01-20 12:38 763要让Dreamweaver支持jQuery自动提示代码功能，方 ... -
jQuery-强大的jQuery选择器 (详解)[转]
2010-01-21 11:48 2921. 基础选择器 Basics 名称 ...
相关推荐
在IT领域，"可编辑表格"是一个非常实用的功能，它广泛应用于数据管理、数据分析和信息组织。无论是电子表格软件如Microsoft Excel，还是在线协作工具如Google Sheets，这种功能都为用户提供了极大的便利。下面我们将...
在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 可编辑 表格的例子
在Vue项目中，当面临需要实现可编辑表格的需求时，开发者通常会遇到性能问题，特别是在数据量较大的情况下。本文将详细介绍如何使用`vxe-table`库来创建一个高效的可编辑表格，以解决类似的问题。 首先，`vxe-table...
在提供的压缩包文件"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页面中...