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. Linux实战教学笔记03:操作系统发展历程及系统版本选择

    标签(空格分隔): Linux实战教学笔记-陈思齐 第1章 Linux简介 1.1 什么是操作系统? 简单讲:操作系统就是一个人与计算机硬件的中介. 操作系统,英文名称Operating System ...

  2. ASP.NET Aries 2.0 发布(原来的源码SVN已关闭,开源源码已迁移到GitHub)

    主要更新: 1:增加子目录部署支持. 2:增加Taurus.MVC支持. 3:优化及Bug修复. 1:增加子目录部署支持: 其实在重写Aries框架的时候,我是去掉了目录部署功能的,主要是为了加快Ar ...

  3. 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  4. Java的几个同步辅助类

    Java为我们提供了一些同步辅助类,利用这些辅助类我们可以在多线程编程中,灵活地把握线程的状态. CountDownLatch CountDownLatch一个同步辅助类,在完成一组正在其他线程中执行 ...

  5. Android Studio2.1.2 Java8环境下引用Java Library编译出错

    转载请注明出处:http://www.cnblogs.com/LT5505/p/5685242.html 问题:在Android Studio2.1.2+Java8的环境下,引用Java Librar ...

  6. 10 Minutes to pandas

    摘要   一.创建对象 二.查看数据 三.选择和设置 四.缺失值处理 五.相关操作 六.聚合 七.重排(Reshaping) 八.时间序列 九.Categorical类型   十.画图      十一 ...

  7. Linux命令:ps,netstat,top

    ps ps用于查看当前运行的进程.如果想查看动态的进程信息,可以使用top命令.查看详细命令帮助使用man ps. ps最常用的选项组合就是ps aux: # ps aux USER PID %CPU ...

  8. 关于项目中下单流程HTML设计的一些思考

    需求 上面文字和圈圈是对齐的. 想法 一开始是想把文字和圈圈分开来的,也就是两个盒子放置.但操作中发现,想把它们对齐非常的难,总有一些是无法对齐的. 最终换了一种实现方式,按照需求,不就是想把它们关联 ...

  9. 现代3D图形编程学习-基础简介(1) (译)

    本书系列 现代3D图形编程学习 基础简介 并不像本书的其他章节,这章内容没有相关的源代码或是项目.本章,我们将讨论向量,图形渲染理论,以及OpenGL. 向量 在阅读这本书的时候,你需要熟悉代数和几何 ...

  10. 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...