bootstrap table单元格新增行并编辑


Posted in Javascript onMay 19, 2017

table单元格新增行并编辑,具体内容如下

需要

bootstrap.min.css —— [ Bootstrap ]

jquery-1.8.2.min.js —— [ Jquery ]

代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新建HTML</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript"> 
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"); 
}
var row=0; 
function addtr(){ 
  if(row<8){
  row++;
  var table = $("#para_table"); 
  var tr= $("<tr>" + 
    "<td style='text-align: center;' onclick='tdclick(this)'>"+"</td>" + 
    "<td style='text-align: center;' 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); 
  }else{
    alert("已达到发票能开具的最大商品明细行数");
  }
} 
function deletetr(tdobject){
  row--;
  var td=$(tdobject); 
  td.parents("tr").remove(); 
}


</script>
<link href="bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css">
</head>
<body>
<table class="table table-bordered" id="para_table">
 <thead>
  <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>
 </thead>
 <tbody>
  <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>
 </tbody>
</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>
</body>
</html>

效果图:

bootstrap table单元格新增行并编辑

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

Javascript 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
layui弹出层效果实现代码
May 19 #Javascript
layui分页效果实现代码
May 19 #Javascript
layui前段框架日期控件使用方法详解
May 19 #Javascript
详解Node.js开发中的express-session
May 19 #Javascript
前端页面文件拖拽上传模块js代码示例
May 19 #Javascript
jQuery操作之效果详解
May 19 #jQuery
AngularJS中的promise用法分析
May 19 #Javascript
You might like
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
python绘制分布折线图的示例
2020/09/24 Python
python中字符串的编码与解码详析
2020/12/03 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
学习党章思想汇报
2014/01/07 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
消费者投诉书范文
2015/07/02 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python