点击编辑table变为可编辑状态
简单描述:开发中遇到一个小困难,table展示的数据,需要是可编辑的,点击编辑按钮,页面table可以进行编辑,编辑完成后,点击保存数据就保留下来~~~
思路:用一个带有input的表去替换不带input的表,用show和hide来实现
代码:
//html代码
<div class="btn-group">
<button class="btn sbold green" id="edit" onclick="">
<span class="ladda-label">编辑</span>
</button>
</div>
<div class="btn-group">
<button class="btn sbold green" id="save" onclick="">
<span class="ladda-label">保存</span>
</button>
</div> <form action="" class="horizontal-form" method="post" id="saveForm" autocomplete="off">
<table class="table table-striped table-bordered table-hover table-checkable order-column"
id="table1">
<thead>
<tr >
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>编码</th>
</tr>
</thead>
<tbody>
<tr th:each="list : ${fileList}" class="trs find">
<td class="dbclicktd" th:text="${list.temp_id}">序号</td>
<td class="dbclicktd" th:text="${list.temp_number}">编号</td>
<td class="dbclicktd" th:text="${list.temp_name}">名称</td>
<td class="dbclicktd" th:text="${list.temp_code}">编码</td>
</tr>
</tbody>
</table> <table class="table table-striped table-bordered table-hover table-checkable order-column"
id="tableto">
<thead>
<tr >
<th>序号</th>
<th>合同编号</th>
<th>企业名称</th>
<th>企业编码</th>
</tr>
</thead>
<tbody>
<tr id="editExcel" th:each="list : ${rightsFailList}" class="trs editExcel">
<td class="dbclicktd"><input th:value="${list.temp_id}" name="temp_id"/></td>
<td class="dbclicktd"><input th:value="${list.temp_number}" name="temp_number"/></td>
<td class="dbclicktd"><input th:value="${list.temp_name}" name="temp_name"/></td>
<td class="dbclicktd"><input th:value="${list.temp_code}" name="temp_code"/></td>
</tr>
</tbody>
</table>
</form>
//js代码
$(function () {
var info=$("#table1_info").val();
$("#tableto").hide();
$("#tableto_info").hide();
$("#tableto_length").hide();
$("#tableto_paginate").hide();
$("#tableto_wrapper").hide();
}); $("#edit").click("click", function () {
$("#tableto").show();
$("#tableto_info").show();
$("#tableto_length").show();
$("#tableto_paginate").show();
$("#tableto_wrapper").show();
$("#table1").hide();
$("#table1_info").hide();
$("#table1_length").hide();
$("#table1_paginate").hide();
$("#table1_wrapper").hide();
var info=$("#table1_info").text();
$("#tableto_info").html(info);
}); $("#save").click("click", function () {
var ri=JSON.stringify(riList);
var obj = JSON.stringify($("#saveForm").serializeJson());
var searchServPath = "/sys/chas/aimCont";
var html = $("#topli").html();
var tb = $("#loadhtml");
tb.html(CommnUtil.loadingImg());
tb.load(rootPath + searchServPath,{objJson:obj,riJson:ri}, function () {
$("#topli").html(html);
}); });
点击保存后可以把修改后的数据传递到后台做一些处理,然后通过Model或者ModelMap的addAttribute()方法在返回回来。
总结:就是用两张table进行相互的显隐替换,从而实现table的可编辑。
点击编辑table变为可编辑状态的更多相关文章
- 关于bootstrap table 的可编辑列表的实例
最近被安排到一个新的项目里,首先被分配了一个成果管理的模块,虽然是简单的增删改查,但是也费了不少功夫. 其中耽误最长的时间就是form中嵌套了两个可编辑列表的子表.废话不说上干货 = = 参考资料 1 ...
- jQuery table td可编辑
参考链接: http://www.freejs.net/ http://www.freejs.net/article_biaodan_34.html http://www.freejs.net/sea ...
- AE二次开发中几个功能速成归纳(符号设计器、创建要素、图形编辑、属性表编辑、缓冲区分析)
/* * 实习课上讲进阶功能所用文档,因为赶时间从网上抄抄改改,凑合能用,记录一下以备个人后用. * * ----------------------------------------------- ...
- 点击搜索取消UISearchDisplayController的搜索状态
一般,我们用到UISearchDisplayController的时候,都是须要对一个数据源进行刷选,在UISearchDisplayController自带的tableView中展示出来,然后点击退 ...
- JS实现双击内容变为可编辑状态
在一些网站上我们经常看到交互性很强的功能.一些用户资料可以直接双击出现文本框,并在此输入新的资料即可修改,无需再按确定按钮等.. 我在网上查了很多资料,但都有一个小bug,就是当获取焦点后,光标的位置 ...
- ASP.NET前台html页面对table数据的编辑删除
摘要:本来说这个企业的门户网站单纯的做做显示公司文化信息的,做好了老板说要新增在线办理业务,本来这个网站是基于别人的框架做的前台都只能用纯html来做.好吧上两篇我就写了table里面向数据库插入数据 ...
- JQuery结合Ajax实现双击Table表格,使Table变成可编辑,并保存到数据库中
本文属于原创,转载请标明出处! 近期在做项目时,要实现通过双击Table表格的TR,使Table行变成可编辑,来实现修改数据并保存到数据库中的功能,无需多说,直接贴代码吧.希望能得到各位同仁指正. f ...
- Element Ui中table实现表格编辑效果
主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...
- EditText设置可以点击,但是不可以编辑
EditText设置 editText.setEnabled(false);后不可编辑也不可点击 设置 setFocusable(false)后不可编辑,但是再设置 setFocusable(tr ...
随机推荐
- asp.net core开源项目
Orchard框架:https://www.xcode.me/code/asp-net-core-cms-orchard https://orchardproject.net/ https://git ...
- P1339 [USACO09OCT]热浪Heat Wave
我太lj了,所以趁着夜色刷了道最短路的水题....然后,,我炸了. 题目描述: The good folks in Texas are having a heatwave this summer. T ...
- [洛谷P1392] 取数
无法用复杂状态进行转移时改变计算方式:巧妙的整体考虑:压缩空间优化时间 传送门:$>here<$ 题意 给出一个n*m矩阵,从每一行选一个数加起来,可以得到一个和.易知总共会有$n^n$个 ...
- UnicodeDecodeError: 'ascii' codec can't decode byte 0xa0 in position 0: ordinal not in range(128)
- [File transfer]Syncthing
https://syncthing.net/ 另外两种1.filezila 2.python -m http
- Codeforces 1108E2 Array and Segments (Hard version)(差分+思维)
题目链接:Array and Segments (Hard version) 题意:给定一个长度为n的序列,m个区间,从m个区间内选择一些区间内的数都减一,使得整个序列的最大值减最小值最大. 题解:利 ...
- yii2 使用指定数据库执行createCommand
Yii::$app->dbName->createCommand($sql)->queryAll(); 指定dbName数据库配置
- BZOJ 3157: 国王奇遇记 (数学)
题面:BZOJ3157 一句话题意: 求: \[ \sum_{i=1}^ni^m\ \times m^i\ (mod\ 1e9+7)\ \ (n \leq 1e9,m\leq200)\] 题解 令 \ ...
- anacodna/python 安装 tensorflow
study from : https://www.cnblogs.com/HongjianChen/p/8385547.html 执行1-6 7 安装jupyter 每次使用tensorflow,都要 ...
- redisson整合spring
转: redisson整合spring 转: 原文:http://blog.csdn.net/wang_keng/article/details/73549274 首先讲下什么是Redisson:Re ...