bootstrap table 双击可编辑,添加、删除行
html:
<table class="table table-bordered" id="para_table">
<tr>
<th style="text-align:center" width="200">名称</th>
<th style="text-align:center" width="200">值</th>
<th style="text-align:center" width="100">操作</th>
</tr>
<tr>
<td style="text-align:center; " onclick="tdclick(this)"></td>
<td style="text-align:center; " onclick="tdclick(this)"></td>
<td style="text-align:center; " onclick="deletetr(this)">
<button type="button" class="btn btn-xs btn-link">删除</button>
</td>
</tr>
</table> <div id="addtrdiv" style="margin-top:-15px; width: 15%; float: right;">
<button type="button" class="btn btn-xs btn-link" onclick="addtr()">添加</button>
</div>
js:
function save_para_table(){ var tableinfo = gettableinfo();
alert(tableinfo); }
//get table infomation
function gettableinfo(){
var key = "";
var value = "";
var tabledata = "";
var table = $("#para_table");
var tbody = table.children();
var trs = tbody.children();
for(var i=1;i<trs.length;i++){
var tds = trs.eq(i).children();
for(var j=0;j<tds.length;j++){
if(j==0){
if(tds.eq(j).text()==null||tds.eq(j).text()==""){
return null;
}
key = "key\":\""+tds.eq(j).text();
}
if(j==1){
if(tds.eq(j).text()==null||tds.eq(j).text()==""){
return null;
}
value = "value\":\""+tds.eq(j).text();
}
}
if(i==trs.length-1){
tabledata += "{\""+key+"\",\""+value+"\"}";
}else{
tabledata += "{\""+key+"\",\""+value+"\"},";
}
}
tabledata = "["+tabledata+"]";
return tabledata;
} function tdclick(tdobject){
var td=$(tdobject);
td.attr("onclick", "");
//1,取出当前td中的文本内容保存起来
var text=td.text();
//2,清空td里面的内容
td.html(""); //也可以用td.empty();
//3,建立一个文本框,也就是input的元素节点
var input=$("<input>");
//4,设置文本框的值是保存起来的文本内容
input.attr("value",text);
input.bind("blur",function(){
var inputnode=$(this);
var inputtext=inputnode.val();
var tdNode=inputnode.parent();
tdNode.html(inputtext);
tdNode.click(tdclick);
td.attr("onclick", "tdclick(this)");
});
input.keyup(function(event){
var myEvent =event||window.event;
var kcode=myEvent.keyCode;
if(kcode==13){
var inputnode=$(this);
var inputtext=inputnode.val();
var tdNode=inputnode.parent();
tdNode.html(inputtext);
tdNode.click(tdclick);
}
}); //5,将文本框加入到td中
td.append(input);
var t =input.val();
input.val("").focus().val(t);
// input.focus(); //6,清除点击事件
td.unbind("click");
}
function addtr(){
var table = $("#para_table");
var tr= $("<tr>" +
"<td onclick='tdclick(this)'>"+"</td>" +
"<td onclick='tdclick(this)'>"+"</td>" +
"<td align='center' onclick='deletetr(this)'><button type='button' class='btn btn-xs btn-link' >"+"删除"+"</button></td></tr>");
table.append(tr);
}
function deletetr(tdobject){
var td=$(tdobject);
td.parents("tr").remove();
}
bootstrap table 双击可编辑,添加、删除行的更多相关文章
- 关于bootstrap table 的可编辑列表的实例
最近被安排到一个新的项目里,首先被分配了一个成果管理的模块,虽然是简单的增删改查,但是也费了不少功夫. 其中耽误最长的时间就是form中嵌套了两个可编辑列表的子表.废话不说上干货 = = 参考资料 1 ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- 如何将自定义的搜索参数便捷的添加到js方式的bootstrap table的参数中
页面: <div> <form id="exp_form"> 查询参数... <button type="button" oncl ...
- bootstrap table 超链接的添加 <a>标签
后台管理页面采用 bootstrap table 页面样式: 现在需要在操作中添加一个<a>标签,跳转到不同的页面 { title: '操作', align: 'center', form ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- 后台系统组件:一丶bootstrap table
http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...
- 表格组件神器:bootstrap table详细使用指南
1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--bootstrap table之用户管理列表
这张开始bootstrap table,引入项目有两种方法,一种是直接去官网下载 地址:http://bootstrap-table.wenzhixin.net.cn/ 另一种是Nuget引入. 然后 ...
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十六节--SignalR与ABP框架Abp.Web.SignalR及扩展
SignalR简介 SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指 ...
随机推荐
- 51nod-1220-约数之和
题意 求 \[ \sum _{i=1}^n\sum _{j=1}^nd(ij) \\ d(x)=\sum _{e|x}e \] \(n\le 10^9\) . 分析 没有推出来.这题有几个要点要学习. ...
- 题解 P1059 【明明的随机数】
不会其他排序的小金羊又来水题了 本题我的思路:堆排,速度不需要算很快,AC就可以... 注意:初学者不宜抄此代码(压行严重) code: #include <cstdio> #includ ...
- P1107 [BJWC2008]雷涛的小猫
题目描述 雷涛同学非常的有爱心,在他的宿舍里,养着一只因为受伤被救助的小猫(当然,这样的行为是违反学生宿舍管理条例的).在他的照顾下,小猫很快恢复了健康,并且愈发的活泼可爱了. 可是有一天,雷涛下课回 ...
- 洛谷P1658 购物
题目戳 题目描述 你就要去购物了,现在你手上有N种不同面值的硬币,每种硬币有无限多个.为了方便购物,你希望带尽量少的硬币,但要能组合出1到X之间的任意值. 输入输出格式 输入格式: 第一行两个数X.N ...
- Openssl的编译安装以及Vs2012上环境搭建教程
Openssl的编译安装以及Vs2012上环境搭建教程 一.Openssl的编译安装 一.准备工作 1.Openssl下载地址:https://www.openssl.org/source/ 2.Ac ...
- 【转载 save】vim键位图。
留图,备用,copy from 网络
- HTTP ------ connection 为 close 和 keep-alive 的区别
keep-alive和close这个要从TCP握手讲起 HTTP请求是基于TCP连接的,TCP的请求会包含(三次握手,中间请求,四次挥手)在HTTP/1.0时代,一个HTTP请求就要三次握手和四次挥手 ...
- 配置:heartbeat+nginx+mysqld+drbd高可用笔记(OK)
参考资料:http://www.centoscn.com/CentosServer/cluster/2015/0605/5604.html 背景需求: 使用heartbeat来做HA高可用,并且把 ...
- python 获取文件md5
def GetFileMd5(filename): if not os.path.isfile(filename): return myhash = hashlib.md5() f = file(fi ...
- MSBuild问题积累
我想要当属性ConfigurationType定义为StaticLibrary时,将其重新定义为StaticLibrary,按照以下来做,实现不了. <ConfigurationType> ...