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

 更新时间:2017年09月27日 10:35:02   作者:NewsAttack  
这篇文章主要为大家详细介绍了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函数表达式

    这篇文章主要向大家详细介绍了javascript函数表达式,帮助大家理解javascript函数表达式,感兴趣的朋友可以参考一下
    2016-02-02
  • 基于javascript html5实现多文件上传

    基于javascript html5实现多文件上传

    这篇文章主要为大家详细介绍了基于javascript html5实现多文件上传的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 详解es6新增数组方法简便了哪些操作

    详解es6新增数组方法简便了哪些操作

    这篇文章主要介绍了详解es6新增数组方法简便了哪些操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JS数组属性去重并校验重复数据

    JS数组属性去重并校验重复数据

    这篇文章主要介绍了JS数组属性去重并校验重复数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • 利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解

    利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解

    这篇文章主要给大家介绍了关于利用canvas中toDataURL()将图片转为dataURL(base64)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • js控住DOM实现发布微博效果

    js控住DOM实现发布微博效果

    这篇文章主要为大家详细介绍了js控住DOM实现发布微博效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Javascript数组方法reduce的妙用之处分享

    Javascript数组方法reduce的妙用之处分享

    这篇文章主要给大家介绍了关于Javascript数组方法reduce的妙用之处,文中通过示例代码介绍的非常详细,对大家学习或者使用Javascript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 让GoogleCode的SVN下的HTML文件在FireFox下正常显示.

    让GoogleCode的SVN下的HTML文件在FireFox下正常显示.

    GoogleCode可以作为免费的稳定的静态资源空间来使用,比如JQuery的文档就在上面
    2009-05-05
  • JS模拟面向对象全解(一、类型及传递)

    JS模拟面向对象全解(一、类型及传递)

    首先说明JS的特点。JS是弱类型的语言,像什么模板多态、又是类又是结构的说法,就完全不存在。
    2011-07-07
  • uniapp实现支付功能

    uniapp实现支付功能

    本文主要介绍了uniapp实现支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05

最新评论