Jquery更改table中的内容(一)

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中的内容(一)的更多相关文章
- jQuery 在Table中选择input之类的东西注意事项
jQuery 在Table中选择input之类的东西注意事项: 如果不在td标签中,是不能进行正确选择的: <table id="tblFormId"> <tr& ...
- jQuery遍历table中的tr td并获取td中的值
jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...
- [分享·JavaScript]提取Table中的内容到XML对象
在公司工作的时候,经常需要在前端进行这样的数据提取的操作.而之前的针对每个页面中的Table都重新写原生的JS代码效率太低,且不方便aspx对XML进行处理. 所以,在今天抽时间写了这么一个JS类,见 ...
- jquery.dataTables表格中的内容怎么设置让它不自动换行
在table中增加 style="white-space: nowrap;" ,这样会撑大td.会出现滚动条. 其他内容配置:每列宽度: "aoColumnDefs&qu ...
- jquery 在 table 中修改某行值
修改 table 中某行的的方法步骤如下: 1.选择要修改的行,事件触发,比如我的 双击某行时修改 2.将要修改的行,替换为input,原先的列中的值,需要放到对应的input中作为默认值 3.修改完 ...
- jquery遍历table中每个td的值
废话不说直接上: <table style="border:1px solid #ccc"> <tr> <td&g ...
- 关于Jquery获取Table中td内的内容
$(this).children().eq(1).text()获取的是显示的值$(this).children().eq(1).html()获取的是<td></td>之间的所有 ...
- 当Table中td内容为空时,显示边框的办法
1. 在 table的css里面加: border-collapse:collapse;在 td 的css里面加: empty-cells:show; 2 .最简单的就是 在TD里写个 说明: ...
- jQuery 往table添加新内容有以下四个方法:
Query 添加新内容有以下四个方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() ...
随机推荐
- 2016年中国微信小程序专题研究报告
2016年12月29日,全球领先的移动互联网第三方数据挖掘和分析机构iiMedia Research(艾媒咨询)权威首发<2016年中国微信小程序专题研究报告>. 报告显示,82.6%手机 ...
- AOP之Castle DynamicProxy 动态代理
这里主要介绍使用castle这个动态代理,在.net一些开源的框架里可以找到它的影子,就连微软的rchard也是使用这个进行方法拦截等可以基于这个进行方法拦截,在这个方面PostSharp算是比较好用 ...
- 全球HTTPS时代已来,你跟上了吗?
全球HTTPS时代已来,你跟上了吗? 互联网发展20多年,大家都习惯了在浏览器地址里输入HTTP格式的网址.但前两年,HTTPS逐渐取代HTTP,成为传输协议界的"新宠". 早 ...
- .net的简易多线程处理
这篇文章是对几年前写的<Task及其异常处理的若干事项>的一些狗尾续貂的补充. 更简单的写法 几年前写的那篇文章很详细地描述了.net用Task对线程进行封装的相关技术.开一个新的线程去执 ...
- ASP.NET MVC 5 Web编程3 -- Controller的应用及扩展
Controller基础 一. 访问修饰符 1.1 类的访问修饰符 Controller类的访问修饰符必须是public,url才能被拦截. internal能编译通过,但无法拦截url请求.priv ...
- ABP源码分析十六:DTO的设计
IDTO:空接口,用于标注Dto对象. ComboboxItemDto:用于combobox/list中Item的DTO NameValueDto<T>/NameValueDto:用于na ...
- 深入浅出Struts2+Spring+Hibernate框架
一.深入浅出Struts2 什么是Struts2? struts2是一种基于MVC的轻量级的WEB应用框架.有了这个框架我们就可以在这个框架的基础上做起,这样就大大的提高了我们的开发效率和质量,为公司 ...
- GitHub实战系列~4.把github里面的库克隆到指定目录+日常使用 2015-12-11
GitHub实战系列汇总:http://www.cnblogs.com/dunitian/p/5038719.html ———————————————————————————————————————— ...
- NotePad++中JSLint的使用
1.第一步下载Notepad++ 2.安装JSLint插件 3.运行JSlint 4.前提是你设置了当前语言或者本身文件就是js 5.JSLint的作用主要就是检查你的JS的规则正确性(至少是绝大部分 ...
- Parallel并行之乱用
关于Parallel我也不细说了,一则微软封装的很好用,二来介绍这个的遍地都是. 我要说的是,要想成为一个优秀的标题党,一定要把重点放到别的地方,为了节省大家阅读时间,我先把结论说了,然后再慢慢从头说 ...
$('.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 })}));