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() ...
随机推荐
- 如何编译Zookeeper源码
1. 安装Ant Ant下载地址:http://ant.apache.org/bindownload.cgi 解压即可. 2. 下载Zookeeper源码包 https://github.com/ap ...
- 录像时调用MediaRecorder的start()时发生start failed: -19错误
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- Linux CentOS7通过yum命令安装Mono(尝先安装模式)
前言 经过尝试网上各种安装mono的技术贴,这个安装过程经历了大约2周,尝试了各个版本,几目前博客所描述的所有安装方式.以下内容的安装方式可以为你尝试不同版本的mono.并非正式环境安装标准方式安装. ...
- .NET开发邮件发送功能的全面教程(含邮件组件源码)
今天,给大家分享的是如何在.NET平台中开发“邮件发送”功能.在网上搜的到的各种资料一般都介绍的比较简单,那今天我想比较细的整理介绍下: 1) 邮件基础理论知识 2) ...
- Entity Framework 6 Recipes 2nd Edition(10-9)译 -> 在多对多关系中为插入和删除使用存储过程
10-9. 在多对多关系中为插入和删除使用存储过程 问题 想要在一个无载荷的多对多关系中使用存储过程(存储过程只影响关系的连接表) 解决方案 假设有一个多对多关系的作者( Author)表和书籍( B ...
- Linux命令:ps,netstat,top
ps ps用于查看当前运行的进程.如果想查看动态的进程信息,可以使用top命令.查看详细命令帮助使用man ps. ps最常用的选项组合就是ps aux: # ps aux USER PID %CPU ...
- 搭建LNAMP环境(七)- PHP7源码安装Memcached和Memcache拓展
上一篇:搭建LNAMP环境(六)- PHP7源码安装MongoDB和MongoDB拓展 一.安装Memcached 1.yum安装libevent事件触发管理器 yum -y install libe ...
- 严重: Null component localEngine:type=JspMonitor,name=jsp,WebModule=//localhost/SpringMVC01,J2EEApplication=none,J2EEServer=none
检查了 Java Build Path, Java Compiler,Project Facts 都确定了版本一致 包括 maven run as →run config 里面的 jdk 和maven ...
- 一、Redis基本操作——String(原理篇)
小喵的唠叨话:最近京东图书大减价,小喵手痒了就买了本<Redis设计与实现>[1]来看看.这里权当小喵看书的笔记啦.这一系列的模式,主要是先介绍Redis的实现原理(可能很大一部分会直接照 ...
- C#设计模式:单件(例)模式 -- 类也玩计划生育
这里写的代码,相当于<Head First 设计模式>的读书笔记,原书是java的,自己在学习的过程中将其翻译为C#: (一)剖析经典的单件模式实现 单件模式 -- 确保一个类只有一个实例 ...
$('.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 })}));