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 相关文章推荐
文字幻灯片
Jun 26 Javascript
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 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如何实现只替换一次或N次
2015/10/29 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
Node.js实现简单管理系统
2019/09/23 Javascript
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
使用python实现kNN分类算法
2019/10/16 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
python中的对数log函数表示及用法
2020/12/09 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
物理力学求职信
2014/02/18 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
一年级小学生评语大全
2014/12/25 职场文书
小学家长通知书评语
2014/12/31 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书