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 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 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 在线打包_支持子目录
2008/06/28 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python运算符重载详解及实例代码
2017/03/07 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python梯度下降法的简单示例
2018/08/31 Python
python实现简单银行管理系统
2019/10/25 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
Python3读写ini配置文件的示例
2020/11/06 Python
股东合作协议书范本
2014/04/14 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
家长会主持词开场白
2015/05/29 职场文书
公司周年庆典致辞
2015/07/30 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
详解Python类和对象内容
2021/06/22 Python
Golang连接并操作MySQL
2022/04/14 MySQL