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() ...
随机推荐
- POJ3693 Maximum repetition substring [后缀数组 ST表]
Maximum repetition substring Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9458 Acc ...
- Mono 4.0 Mac上运行asp.net mvc 5.2.3
Mono 4.0 已经发布,二进制包已经准备好,具体的发布说明参见:http://www.mono-project.com/docs/about-mono/releases/4.0.0/. 今天在Ma ...
- 【腾讯Bugly经验分享】程序员的成长离不开哪些软技能?
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ce8068d4d44a246f72baf2 Dev Club 是一个交流移动 ...
- 集成基于OAuth协议的单点登陆
在之前的一篇文章中,我们已经介绍了如何为一个应用添加对CAS协议的支持,进而使得我们的应用可以与所有基于CAS协议的单点登陆服务通讯.但是现在的单点登陆服务实际上并不全是通过实现CAS协议来完成的.例 ...
- 《深入理解Java虚拟机》内存分配策略
上节学习回顾 1.判断对象存活算法:引用计数法和可行性分析算法 2.垃圾收集算法:标记-清除算法.复制算法.标记-整理算法 3.垃圾收集器: Serial:新生代收集器,采用复制算法,单线程. Par ...
- Fedora 22中的日期和时间配置
Introduction Modern operating systems distinguish between the following two types of clocks: A real- ...
- Storm内部的消息传递机制
作者:Jack47 转载请保留作者和原文出处 欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 一个Storm拓扑,就是一个复杂的多阶段的流式计算.Storm中的组件 ...
- PHP_VERSION_ID是如何定义的
PHP_VERSION_ID是一个整数,表示当前PHP的版本,从php5.2.7版本开始使用的,比如50207表示5.2.7.和PHP版本相关的宏定义在文件 phpsrcdir/main/php_ve ...
- 应用OpenMP的一个简单的设计模式
小喵的唠叨话:最近很久没写博客了,一是因为之前写的LSoftmax后馈一直没有成功,所以在等作者的源码.二是最近没什么想写的东西.前两天,在预处理图片的时候,发现处理200w张图片,跑了一晚上也才处理 ...
- Angular Service入门
1.Angular内置service Angular为了方便开发者开发,本身提供了非常多的内置服务.可以通过https://docs.angularjs.org/api/ng/service查看Ang ...
$('.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 })}));