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. 2DToolkit官方文档中文版打地鼠教程(三):Sprite Collections 精灵集合

    这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...

  2. keepalived 知识备注

    keepalived可用于配置nginx/lvs等负载均衡设备的双机热备. keepalived基于VRRP协议,简单的说就是两个物理路由节点(一主一备),虚拟成一个逻辑上的路由节点. 实际消息的路由 ...

  3. MyBatis1:MyBatis入门

    MyBatis是什么 MyBatis是什么,MyBatis的jar包中有它的官方文档,文档是这么描述MyBatis的: MyBatis is a first class persistence fra ...

  4. 浅谈WebService的版本兼容性设计

    在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...

  5. EasyPR--开发详解(5)颜色定位与偏斜扭转

    本篇文章介绍EasyPR里新的定位功能:颜色定位与偏斜扭正.希望这篇文档可以帮助开发者与使用者更好的理解EasyPR的设计思想. 让我们先看一下示例图片,这幅图片中的车牌通过颜色的定位法进行定位并从偏 ...

  6. React-Native 动画优化

    前言 动画对于客户端来说是非常重要的一部分,直接影响到应用的用户体验.前端对于动画优化通常使用CSS3样式来实现动画,以利用GPU加速特性.而React-Native由于渲染模式的不同,无法使用CSS ...

  7. 小丁带你走进git世界五-远程仓库

    一.文件,指令讲解 首先讲一下远程仓库和本地仓库在文件上面的区别,首先我们来看下对比图(当然这里说的区别是在于.git文件下面的文件内容,至于里面内容我们不会关注)這裡我们进行了相同的操作就是本地仓库 ...

  8. Windows 2008 - 由于管理员设置的策略,该磁盘处于脱机状态

    http://blog.sina.com.cn/s/blog_59cc90640102x8m4.html 查看原文:https://www.bxl.me/9279.html准备使用云主机挂机的时候呢出 ...

  9. ABP框架 - 介绍

    文档目录 本节内容: 简介 一个快速示例 其它特性 启动模板 如何使用 简介 我们总是对不同的需求开发不同的应用.但至少在某些层面上,一次又一次地重复实现通用的和类似的功能.如:授权,验证,异常处理, ...

  10. ★Kali信息收集~★7.FPing :ip段扫描

    参数: 使用方法: fping [选项] [目标...] -a显示是活着的目标 -A 显示目标地址 -b n 大量 ping 数据要发送,以字节为单位 (默认 56) -B f 将指数退避算法因子设置 ...