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 相关文章推荐
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
详解JavaScript 的变量
Mar 08 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
JavaScript async/await原理及实例解析
Dec 02 Javascript
在js中修改html body的样式
Nov 11 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
我的论坛源代码(六)
2006/10/09 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
用 JSON 处理缓存
2007/04/27 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
JS判断数组那点事
2017/10/10 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python实现简易Web爬虫详解
2018/01/03 Python
python在每个字符后添加空格的实例
2018/05/07 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
Python如何定义有默认参数的函数
2020/08/10 Python
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
项目经理聘任书
2014/03/29 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
融资租赁计划书
2014/04/29 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
惊天动地观后感
2015/06/10 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
Python Pygame实战之塔防游戏的实现
2022/03/17 Python