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 相关文章推荐
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
php empty函数判断mysql表单是否为空
2010/04/12 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
Python按行读取文件的简单实现方法
2016/06/22 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
大学生就业自荐信
2013/10/26 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
叶问观后感
2015/06/15 职场文书
教师节晚会主持词
2015/06/30 职场文书
宣传委员竞选稿
2015/11/19 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL
Golang gRPC HTTP协议转换示例
2022/06/16 Golang