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 相关文章推荐
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
vue 限制input只能输入正数的操作
Aug 05 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php设计模式 Builder(建造者模式)
2011/06/26 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
python自动zip压缩目录的方法
2015/06/28 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
Django 路由层URLconf的实现
2019/12/30 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
求职简历中的自我评价分享
2013/12/08 职场文书
12岁生日感言
2014/01/21 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
Django实现聊天机器人
2021/05/31 Python
python 对图片进行简单的处理
2021/06/23 Python