bootstrap table实现双击可编辑、添加、删除行功能


Posted in Javascript onSeptember 27, 2017

本文实例为大家分享了bootstrap table双击可编辑的具体代码,供大家参考,具体内容如下

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(); 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
DWR中各种java方法的调用
May 04 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 #Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 #Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 #Javascript
js实现扫雷小程序的示例代码
Sep 27 #Javascript
Three.js如何实现雾化效果示例代码
Sep 27 #Javascript
浅谈Angular4中常用管道
Sep 27 #Javascript
深入理解Vue.js源码之事件机制
Sep 27 #Javascript
You might like
php中call_user_func函数使用注意事项
2014/11/21 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
客户端静态页面玩分页
2006/06/26 Javascript
google地图的路线实现代码
2009/08/20 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
python使用udp实现聊天器功能
2018/12/10 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
电子信息专业自荐书
2014/02/04 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
干部培训工作总结2015
2015/05/25 职场文书