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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS组件Bootstrap Table使用方法详解
最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一.效果展示 二.BootStrap table简单介绍 bootStra
-
BootStrap table表格插件自适应固定表头(超好用)
首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b
-
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使用方法总结
最近接触一个很棒的插件,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的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述.本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它. 首先交代一下,jquery ,bootstrap
-
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资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详细,故有了下列的文章.希望我的文章能给大家带来帮助. bootstrap-table作为常用的TABLE显示控件,会经常出现在各位的项目当中. 使用步骤如下: 第一步: 下载bootstrap-table需要使用的文件(包括Css and js文件) 官方网址 http://bootstrap-
-
Bootstrap table学习笔记（2） 前后端分页模糊查询
在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下,顺便做个总结: 1.前端分页 2.后端分页 3.模糊查询 前端分页相当简单,在我添加了2w条测试数据的时候打开的很流畅,没有卡顿. $(function(){ a(); }); function a () { $('#yourtable').bootstrapTable({ url: "/user/getUserList/", method:"post", dataType: "json&
-
第一次记录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 服务器端分页例子分享
1,前台引入所需的js 可以从官网上下载 复制代码 代码如下: function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm'; $('#tab').bootstrapTable({ method: 'get', //这里要设置为get,不知道为什么 设置post获取不了 url: url, cache: false, height: 400, striped: tru