脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery点击表格单元格可编辑内容

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

 更新时间：2016年08月01日 10:24:40   作者：Quber  
这篇文章主要介绍了jQuery实现点击表格单元格就可以编辑内容的方法,涉及jQuery针对table表格元素的遍历与动态操作相关技巧,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

相关文章

  • JQuery AJAX实现目录浏览与编辑的代码

    JQuery AJAX实现目录浏览与编辑的代码

    这部分作为后台的一部分实现，目的是实现某个指定目录下所有文件夹和文件的浏览，同时不显示不允许的格式，对于文本格式和代码文件可以进行编辑
    2008-10-10
  • 分享精心挑选的23款美轮美奂的jQuery 图片特效插件

    分享精心挑选的23款美轮美奂的jQuery 图片特效插件

    jQuery是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择。其中，jQuery 最令人印象深刻的应用之一就是对图片的处理，它可以让帮助你在你的项目中加入各种精美的图片展示效果
    2012-08-08
  • JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery中阻止事件冒泡方式有哪些？本文为大家准备了两种阻止事件冒泡的方式，两种方式的区别在于。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身
    2014-01-01
  • jQuery使用zTree插件实现可拖拽的树示例

    jQuery使用zTree插件实现可拖拽的树示例

    本篇文章主要介绍了js使用zTree插件实现可拖拽的树示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 关于Jquery中的事件绑定总结

    关于Jquery中的事件绑定总结

    下面小编就为大家带来一篇关于Jquery中的事件绑定总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JQuery中使用ajax传输超大数据的解决方法

    JQuery中使用ajax传输超大数据的解决方法

    这篇文章主要介绍了JQuery中使用ajax传输超大数据的解决方法,也就是比较多的数据,超过max_upload_size等设置,本文方法在chrome浏览器下测试通过,需要的朋友可以参考下
    2014-07-07
  • jQuery实现的瀑布流加载效果示例

    jQuery实现的瀑布流加载效果示例

    这篇文章主要介绍了jQuery实现的瀑布流加载效果,结合实例形式分析了jQuery基于数学运算与事件响应实现页面瀑布流加载的功能,需要的朋友可以参考下
    2016-09-09
  • 浅谈jquery高级方法描述与应用

    浅谈jquery高级方法描述与应用

    下面小编就为大家带来一篇浅谈jquery高级方法描述与应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jquery自定义插件开发之window的实现过程

    jquery自定义插件开发之window的实现过程

    这篇文章主要介绍了jquery自定义插件开发之window的实现过程的相关资料,需要的朋友可以参考下
    2016-05-05
  • jQuery插件实现静态HTML验证码校验

    jQuery插件实现静态HTML验证码校验

    这篇文章主要介绍了jQuery插件实现静态HTML验证码校验，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-11-11

最新评论