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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
判断用户是否在线的代码
Mar 05 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 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中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python yield 小结和实例
2014/04/25 Python
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Django csrf 验证问题的实现
2018/10/09 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
python 监控logcat关键字功能
2020/09/04 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
求职信格式范本
2013/11/15 职场文书
联欢晚会主持词
2014/03/25 职场文书
安全生产年活动总结
2014/08/29 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python