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技巧收藏
Apr 07 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
html Table 表头固定的实现
2019/01/22 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
端午节粽子促销活动方案
2014/02/02 职场文书
食品安全检查制度
2014/02/03 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
大学英语专业求职信
2014/06/21 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
2015年暑期见闻
2015/07/14 职场文书
公司人力资源管理制度
2015/08/05 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技