bootstrap table单元格新增行并编辑

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>

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-05-16

JS表格组件神器bootstrap table详解(基础版)

一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

Bootstrap table使用方法总结

最近接触一个很棒的插件,Bootstrap table 没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真是牛. 构造方式 1 .HTML <div class="btn-group hidden-xs"id="exampleTableEventsToolbar" > //定义一系列工具栏... </div> <table data-toggle="ta

bootstrap table使用入门基本用法

笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详细,故有了下列的文章.希望我的文章能给大家带来帮助. bootstrap-table作为常用的TABLE显示控件,会经常出现在各位的项目当中. 使用步骤如下: 第一步: 下载bootstrap-table需要使用的文件(包括Css and js文件) 官方网址   http://bootstrap-

Bootstrap Table使用方法详解

bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述.本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它. 首先交代一下,jquery ,bootstrap

bootstrap table 服务器端分页例子分享

1,前台引入所需的js 可以从官网上下载 复制代码 代码如下: function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm'; $('#tab').bootstrapTable({ method: 'get', //这里要设置为get,不知道为什么 设置post获取不了 url: url, cache: false, height: 400, striped: tru

bootstrap table表格插件使用详解

bootstrp-table学习,具体内容如下 $table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCountColumns: 2, clickToSelect: true, detailView: true, detailFormatter: 'detailFormatter', pagination: true, paginationLoop: false, classes: 'table tabl

BootStrap table表格插件自适应固定表头(超好用)

首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

JS组件Bootstrap Table使用方法详解

最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一.效果展示 二.BootStrap table简单介绍 bootStra

第一次记录Bootstrap table学习笔记(1)

第一次使用Bootstrap-table这个表格插件,记录一下使用过程中遇到的问题. |引入CSS文件 <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> |引入相关库 我们需要引入Jquery库.bootstrap库.以及bootstrap-table.j

Bootstrap table学习笔记(2) 前后端分页模糊查询

在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下,顺便做个总结: 1.前端分页 2.后端分页 3.模糊查询 前端分页相当简单,在我添加了2w条测试数据的时候打开的很流畅,没有卡顿. $(function(){ a(); }); function a () { $('#yourtable').bootstrapTable({ url: "/user/getUserList/", method:"post", dataType: "json&

hibernate的分页模糊查询功能

在web项目中,显示数据一般采用分页显示的,在分页的同时,用户可能还有搜索的需求,也就是模糊查询,所以,我们要在dao写一个可以分页并且可以动态加条件查询的方法.分页比较简单,采用hibernate提供的分页,动态条件采用map("字段",模糊值)封装查询条件,map可以添加多个查询条件,是个不错的选择,从而达到实现分页并模糊查询. @Override public List<T> findPage(int page, int length, Map<String,

Bootstrap选项卡学习笔记分享

本文实例为大家分享了Bootstrap选项卡的学习笔记,供大家参考,具体内容如下 tab选项卡 <body> <div class="container"> <!-- tab选项卡 --> <ul class="nav nav-tabs"> <li class="active"><a href="#pan1" data-toggle="tab"

Lua中的table学习笔记

table 在 Lua 里是一种重要的数据结构,它可以说是其他数据结构的基础,通常的数组.记录.线性表.队列.集合等数据结构都可以用 table 来表示,甚至连全局变量(_G).模块.元表(metatable)等这些重要的 Lua 元素都是 table 的结构.可以说,table  是一个强大而又神奇的东西. table 特性 在之前介绍 Lua 数据类型时,也说过了 table 的一些特性,简单列举如下(详情可查看之前的介绍): 1.table是一个"关联数组",数组的索引可以是数字

值得分享的Bootstrap Table使用教程

bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述. jquery ,bootstrap ,bootstrap-table 三者之间的关系.bootstrap很多部分代码涉及到了jquery的,也就是说 bootstrap是依赖j

Bootstrap table 实现树形表格联动选中联动取消功能

公司最近有需求要做树形式table.因为是前后端不分离项目,且之前已经引入了bootstrap table插件,现把实现方式分享一下: <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"

vue2 前后端分离项目ajax跨域session问题解决方法

最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题: 实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆. 1. vuejs ajax跨域请求 最开始使用的是vue-resource,结果发现vue2推荐的是axios,于是改成axios:安装axios npm install axios -S 安装完成后在main.js中增加一下配置: import axios from 'axios'; axios.defa

mybatis分页及模糊查询功能实现

mybatis中分页有3种方式来实现,通过sql语句(两种传参方式)来实现,通过mybatis 的 Rowbounds 来实现. 通过(自定义类型)传参 来实现分页: 映射文件: <select id="findListBypage" parameterType="cn.wh.util.PageUtil" resultType="Role"> select * from t_role limit #{index},#{size} &l

Bootstrap基本组件学习笔记之分页(12)

Bootstrap提供了对分页的良好支持. 0x01 默认的分页 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=&qu