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的最佳方法分享
Oct 21 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
Highcharts学习之数据列
Aug 03 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 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获取地址栏信息的代码
2008/10/08 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP模块化安装教程
2016/06/01 PHP
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
python多进程操作实例
2014/11/21 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python IDLE入门简介
2017/12/08 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
Python线程之定位与销毁的实现
2019/02/17 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
创联软件面试题笔试题
2012/10/07 面试题
求职自荐信格式
2013/12/04 职场文书
初二生物教学反思
2014/02/03 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
勤俭节约倡议书
2014/04/14 职场文书
园林系毕业生求职信
2014/06/23 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
老公婚前保证书
2015/02/28 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书