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 相关文章推荐
javascript 操作文件 实现方法小结
Jul 02 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
vant中的toast轻提示实现代码
Nov 04 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
destoon实现调用热门关键字的方法
2014/07/15 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
php异常处理捕获错误整理
2019/09/23 PHP
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
python错误处理详解
2014/09/28 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
django项目搭建与Session使用详解
2018/10/10 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
python实现学生管理系统开发
2020/07/24 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
搞笑车尾标语
2014/06/23 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
三八妇女节主持词
2015/07/04 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle