css部分:

.tab{
  border:solid 1px #00aaee;
  text-align: left;
  margin:20px;
}
.tab tr{
  border-top: solid 1px #00aaee;
}
.tab tr td,.tab tr th{
  border-right: solid 1px #00aaee;
  height:35px;
  width: 200px;
  padding: 0 5px;
}
.tab tr th{
  background: #00aaee;
  color:#fff;
}
.tab input{
  width: 90%;
  margin: 0;
  padding: 3px ;
  border: solid 1px #00aaee;
}

html部分:

<table class="tab">    <tr>        <th>编号</th><th>名称</th>    </tr>    <tr>        <td>1</td><td>辣条</td>    </tr>    <tr>        <td>2</td><td>牛奶</td>    </tr>    <tr>        <td>3</td><td>苹果</td>    </tr>    <tr>        <td>4</td><td>葡萄</td>    </tr></table>

js部分:$('.tab td').bind('click',(function(){    if($('input').length > 0){        $('input').parent().html($('input').val());    }    var current = $(this);    if(current.children('input').length > 0){        return false;    }    var txt = current.html();    current.html('');    var inputObj  = $("<input type='text'>").val(txt).appendTo(current);    inputObj.click(function(){        return false    })}));

Jquery更改table中的内容(一)的更多相关文章

  1. jQuery 在Table中选择input之类的东西注意事项

    jQuery 在Table中选择input之类的东西注意事项: 如果不在td标签中,是不能进行正确选择的: <table id="tblFormId"> <tr& ...

  2. jQuery遍历table中的tr td并获取td中的值

    jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...

  3. [分享·JavaScript]提取Table中的内容到XML对象

    在公司工作的时候,经常需要在前端进行这样的数据提取的操作.而之前的针对每个页面中的Table都重新写原生的JS代码效率太低,且不方便aspx对XML进行处理. 所以,在今天抽时间写了这么一个JS类,见 ...

  4. jquery.dataTables表格中的内容怎么设置让它不自动换行

    在table中增加 style="white-space: nowrap;" ,这样会撑大td.会出现滚动条. 其他内容配置:每列宽度: "aoColumnDefs&qu ...

  5. jquery 在 table 中修改某行值

    修改 table 中某行的的方法步骤如下: 1.选择要修改的行,事件触发,比如我的 双击某行时修改 2.将要修改的行,替换为input,原先的列中的值,需要放到对应的input中作为默认值 3.修改完 ...

  6. jquery遍历table中每个td的值

    废话不说直接上: <table style="border:1px solid #ccc">        <tr>            <td&g ...

  7. 关于Jquery获取Table中td内的内容

    $(this).children().eq(1).text()获取的是显示的值$(this).children().eq(1).html()获取的是<td></td>之间的所有 ...

  8. 当Table中td内容为空时,显示边框的办法

    1. 在 table的css里面加: border-collapse:collapse;在 td 的css里面加: empty-cells:show; 2 .最简单的就是 在TD里写个    说明: ...

  9. jQuery 往table添加新内容有以下四个方法:

    Query 添加新内容有以下四个方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() ...

随机推荐

  1. iOS9支付宝无法调起客户端

    1.为了适配 iOS9.0 中的 App Transport Security(ATS)对 http 的限制,这里需要对 支付宝的请求地址 alipay.com 做例外,在 app 对应的 info. ...

  2. Windows 上安装 Jekyll.

    Jekyll是一个静态网站生成工具.它允许用户使用HTML.Markdown或Textile来建立静态页面,然后通过模板引擎Liquid(Liquid Templating Engine)来运行. 原 ...

  3. 【腾讯Bugly干货分享】Android动态布局入门及NinePatchChunk解密

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57c7ff5d53bbcffd68c64411 作者:黄进——QQ音乐团队 摆脱 ...

  4. height:100% 布局

    常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...

  5. Web API 强势入门指南

    Web API是一个比较宽泛的概念.这里我们提到Web API特指ASP.NET Web API. 这篇文章中我们主要介绍Web API的主要功能以及与其他同类型框架的对比,最后通过一些相对复杂的实例 ...

  6. Atitit 多元化战略 适合我们发展 的核心业务attilax总结

    Atitit 多元化战略 适合我们发展 的核心业务attilax总结 1.1. 历史的大趋势,全球范围内人员的大流动1 1.2. 衣食住行1 1.3. 农村包围城市战略1 1.4. 挪开三座大山(住房 ...

  7. Android-RecyclerView

    众所周知,RecyclerView是Google公司推出的V7包中的一个重要的控件,非常方便,可以替代现有的ListView和Gridview等控件,它功能很强大,灵活性好,扩展性强,还自带VIewH ...

  8. Python模拟登陆新浪微博

    上篇介绍了新浪微博的登陆过程,这节使用Python编写一个模拟登陆的程序.讲解与程序如下: 1.主函数(WeiboMain.py): import urllib2 import cookielib i ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统(56)-插件---单文件上传与easyui使用fancybox

    系列目录 https://yunpan.cn/cZVeSJ33XSHKZ  访问密码 0fc2 今天整合lightbox插件Fancybox1.3.4,发现1.3.4版本太老了.而目前easyui 1 ...

  10. C#:浅析结构与类的区别

    一.      结构:值类型,存储在堆栈中,位于计算机的内存逻辑区域中      类   :引用类型,存储在堆中,位于计算机内存的不同逻辑位置   二.      较小的数据使用结构:      将一 ...