jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】


Posted in Javascript onAugust 01, 2016

本文实例讲述了jQuery实现点击表格单元格就可以编辑内容的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】

具体代码如下:

<!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=utf-8" />
<title>jquery表格可编辑修改表格里面的数值</title>
<meta name="description" content="jquery表格特效制作jquery表格可编辑任意修改里面的数值" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
  $('table td').click(function(){
    if(!$(this).is('.input')){
      $(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){
        $(this).parent().removeClass('input').html($(this).val() || 0);
      });
    }
  }).hover(function(){
    $(this).addClass('hover');
  },function(){
    $(this).removeClass('hover');
  });
});
</script>
<style type="text/css">
/* page styles */
body{font-family:"Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif;font-size:62.5%;}
table{border-collapse:collapse;}
td, th{text-align:center;border:1px solid #ddd;padding:2px 5px;}
caption{margin:0 0 .5em;font-weight:bold;}
/*demo styles*/
table{width:500px;height:200px;margin-left:30px;}
td, th{font-size:1.2em;padding:2px;width:13%;}
th{background-color:#f4f4f4;}
caption{font-size:1.5em;}
table{float:left;margin:40px 40px 0 0;}
.demo{width:500px;margin:0 auto;}
/* input */
td input{border:1px solid orange;background:yellow;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;padding:8px 0;text-align:center;width:60px;margin:-17px 0 0 4px;font-size:1.4em;}
td.input{ padding:0;position:relative;}
td.hover{background:#eee;}
</style>
</head>
<body>
<div class="demo">
  <table>
    <caption>2009年员工产品销售走势图</caption>
    <thead>
      <tr>
        <td></td>
        <th scope="col">food</th>
        <th scope="col">auto</th>
        <th scope="col">household</th>
        <th scope="col">furniture</th>
        <th scope="col">kitchen</th>
        <th scope="col">bath</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Mary</th>
        <td>190</td>
        <td>160</td>
        <td>40</td>
        <td>120</td>
        <td>30</td>
        <td>70</td>
      </tr>
      <tr>
        <th scope="row">Tom</th>
        <td>3</td>
        <td>40</td>
        <td>30</td>
        <td>45</td>
        <td>35</td>
        <td>49</td>
      </tr>
      <tr>
        <th scope="row">Brad</th>
        <td>10</td>
        <td>180</td>
        <td>10</td>
        <td>85</td>
        <td>25</td>
        <td>79</td>
      </tr>
      <tr>
        <th scope="row">Kate</th>
        <td>40</td>
        <td>80</td>
        <td>90</td>
        <td>25</td>
        <td>15</td>
        <td>119</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 #Javascript
AngularJS ng-controller 指令简单实例
Aug 01 #Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 #Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 #Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 #Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 #Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 #Javascript
You might like
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
处理单名多值表单的详解
2013/06/08 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python爬虫实现中英翻译词典
2019/06/25 Python
python区分不同数据类型的方法
2019/10/14 Python
如何在django中添加日志功能
2020/02/06 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
幼儿园招生广告
2014/03/19 职场文书
本科毕业生自荐信
2014/05/26 职场文书
力学专业求职信
2014/07/23 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
婚宴主持词
2015/06/30 职场文书