双击Table表格td变成text修改内容
//先不多说这里上我的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>双击td变成text文本框</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head>
<body>
<div class="widget-content nopadding" id="Mydiv">
<table class="table table-bordered data-table table-hover">
<thead>
<tr>
<th>ID</th>
<th style="width: 200px;">Login Name</th>
<th style="width: 200px;">Pass Word</th>
<th style="width: 200px;">Email</th>
<th>Date</th>
</tr>
</thead> <tbody class="tbody">
<tr>
<td id="id">1</td>
<td id="loginName">HYX15517551511</td>
<td id="password">123456</td>
<td id="Email">15517551511@126.com</td>
<td id="CDate">2014-01-01</td>
</tr> <tr>
<td>2</td>
<td>JJKK</td>
<td>123456</td>
<td>JJKK@126.com</td>
<td>2014-02-02</td>
</tr> <tr>
<td>3</td>
<td>GGMM</td>
<td>123456</td>
<td>GGMM@126.com</td>
<td>2014-03-03</td>
</tr>
</tbody>
</table>
</div>
</body>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- 自己定义的JS文件 -->
<script src="js/MyJS.js"></script>
</html>
//这里就是我的MyJS文件了
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
/*var numId = $(".tbody td");*/ //获取每一行每一个td
//获取每一行第二个td
var numId=$(".tbody tr td:nth-child(2)").each(function(){
});
numId.dblclick(function(){
var tdIns=$(this);
var tdpar=$(this).parents("tr");
var tdId=$(this).attr("id");
/*alert(tdId);*/
tdpar.css("backgroundColor","yellow");
if(tdIns.children("input").length>0){
return false;
}
var text = $(this).html();
var inputIns = $("<input type='text'/>"); //需要插入的输入框代码
inputIns.width(tdIns.width);//设置input与td宽度一致
inputIns.height("36px");
inputIns.val(tdIns.html());//将本来单元格td内容copy到插入的文本框input中
/*alert(tdId);*/
tdIns.html(""); //删除原来单元格td内容
inputIns.appendTo(tdIns).focus().select(); //将需要插入的输入框代码插入dom节点中
inputIns.click(function(){
return false;
});
//处理Enter和Esc事件
inputIns.blur(function(){
var inputText = $(this).val();
tdIns.html(inputText);
tdpar.css("background-color","white");
// tdIns.html(text);
alert(tdId);
$.ajax({
type:"post",
url:"AjaxList",
data:{
"loginName":tdIns.html(),
"id":tdId
},
success:function(data){
alert(data);
},
error : function() {
alert("通讯有问题,请稍候刷新...");
}
});
});
});
});
如果您觉得文章不错可以多顶一顶 谢谢！
双击Table表格td变成text修改内容的更多相关文章
- JQuery结合Ajax实现双击Table表格，使Table变成可编辑，并保存到数据库中
本文属于原创,转载请标明出处! 近期在做项目时,要实现通过双击Table表格的TR,使Table行变成可编辑,来实现修改数据并保存到数据库中的功能,无需多说,直接贴代码吧.希望能得到各位同仁指正. f ...
- table表格整体居中 和 table表格中各行各列内容居中
1.table表格整个居中<div style="text-align: center;"> <table border="1" style= ...
- element-ui的table表格控件表头与内容列不对齐问题
原文链接:点我 element-ui的table表格控件表头与内容列不对齐问题 解决方法:将以下样式代码添加到index.html.或app.vue中(必须是入口文件,起全局作用!)body .el- ...
- table表格td内内容自动换行
项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行 一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行 所以需要设置一下,让表格内容自动换行. 1.给td标签 ...
- td 内容自动换行 table表格td设置宽度后文字太多自动换行
设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可 ...
- 关于table表格 td里内容较多换行的处理方法
最近在用table的时候由于td内容较多默认换行了,很不美观.于是找到处理方法: 在声明table的时候添加一个样式: <table id="tbOffice" data-r ...
- 关于table表格td里内容是数字而且太长不换行的问题
<p>table{table-layout:fixed}</p><p>table td{word-wrap:break-word}</p><p&g ...
- table表格实现点击修改 PHP同步数据库 排序
最近几天在做一个网站,牵扯到一个导航管理的功能!领导说不用作,可是由于自己自作主张,搞了1天的功能.领导说这个导航管理就是不用做!容易牵扯出好多问题来!估摸是客户小的原因! 没办法就把我1天的劳动荒废 ...
- table表格 td设置固定宽度
table宽度自适应,而且部分TD是固定宽度. 只需要将固定宽设死,留下一列不设置宽度,将table宽度设置为100%. table-layout:fixed 作用不是很清楚 <table wi ...
随机推荐
- python3 练习题100例 （十四）
今天逛贴吧,看到有人求助,做了一下.请大家指正! #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = 'Fan Lijun' imp ...
- 内存管理小结(2)--伙伴系统API
伙伴系统分配内存以2的整数幂次的页数为单位.提供的API主要分为分配类与释放类. 1.分配类 1.1unsigned long __get_free_pages(gfp_t gfp_mask, uns ...
- 【Akroma, Angel of Fury】完成svn环境搭建
昨天的那篇博文恰恰是实验室所干的事儿 但是那是一种很投机取巧的方式完成的多project管理方式 来看看我建立环境的方法 首先,找一个比较闲的公用服务器(为什么不用自己的?有公共资源不用,你傻啊?), ...
- Nordic Collegiate Programming Contest (NCPC) 2016
A Artwork B Bless You Autocorrect! C Card Hand Sorting D Daydreaming Stockbroker 贪心,低买高卖,不要爆int. #in ...
- U1
如果 activity_main.xml没有xml代码可以对图像右键 go to mxl同时可以在design 和 text 切换 在安装了Android Studio3.3版本之后,第一个He ...
- Redis实现之服务器
命令请求的执行过程 一个命令请求从发送到获得回复的过程中,客户端和服务器需要完成一系列操作.举个栗子,如果我们使用客户端执行以下命令: 127.0.0.1:6379> SET KEY VALUE ...
- mysql 外连接的时候，条件在on后面和条件在where后面的区别
最近使用mysql的时候碰到一个问题:当一个表外联另一个表的时候,将一些查询条件放在on后面和放在where后面不太一样: 学生分数表stuscore: 当查询语句如下(查询语句1): SELECT ...
- Windows 2008 WinRM和WinRS能帮你做什么？
介绍 WinRM及WinRS更新包含在Windows Vista, Windows Server 2003 R2, Windows Server 2008 (及 Server 2008 Cor ...
- 【3Sum Closest 】cpp
题目: Given an array S of n integers, find three integers in S such that the sum is closest to a given ...
- MFC定时关机程序的实现1
写个定时关机程序自用,界面简单实用,最终界面如下 第一步,新建一个MFC对话框应用程序,拖几个控件过来, 界面如下: 然后给下拉列表框,复选按钮绑定变量,以方便进行操作. CComboBox m_co ...