简单描述:开发中遇到一个小困难,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变为可编辑状态的更多相关文章

  1. 关于bootstrap table 的可编辑列表的实例

    最近被安排到一个新的项目里,首先被分配了一个成果管理的模块,虽然是简单的增删改查,但是也费了不少功夫. 其中耽误最长的时间就是form中嵌套了两个可编辑列表的子表.废话不说上干货 = = 参考资料 1 ...

  2. jQuery table td可编辑

    参考链接: http://www.freejs.net/ http://www.freejs.net/article_biaodan_34.html http://www.freejs.net/sea ...

  3. AE二次开发中几个功能速成归纳(符号设计器、创建要素、图形编辑、属性表编辑、缓冲区分析)

    /* * 实习课上讲进阶功能所用文档,因为赶时间从网上抄抄改改,凑合能用,记录一下以备个人后用. * * ----------------------------------------------- ...

  4. 点击搜索取消UISearchDisplayController的搜索状态

    一般,我们用到UISearchDisplayController的时候,都是须要对一个数据源进行刷选,在UISearchDisplayController自带的tableView中展示出来,然后点击退 ...

  5. JS实现双击内容变为可编辑状态

    在一些网站上我们经常看到交互性很强的功能.一些用户资料可以直接双击出现文本框,并在此输入新的资料即可修改,无需再按确定按钮等.. 我在网上查了很多资料,但都有一个小bug,就是当获取焦点后,光标的位置 ...

  6. ASP.NET前台html页面对table数据的编辑删除

    摘要:本来说这个企业的门户网站单纯的做做显示公司文化信息的,做好了老板说要新增在线办理业务,本来这个网站是基于别人的框架做的前台都只能用纯html来做.好吧上两篇我就写了table里面向数据库插入数据 ...

  7. JQuery结合Ajax实现双击Table表格,使Table变成可编辑,并保存到数据库中

    本文属于原创,转载请标明出处! 近期在做项目时,要实现通过双击Table表格的TR,使Table行变成可编辑,来实现修改数据并保存到数据库中的功能,无需多说,直接贴代码吧.希望能得到各位同仁指正. f ...

  8. Element Ui中table实现表格编辑效果

    主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

  9. EditText设置可以点击,但是不可以编辑

    EditText设置  editText.setEnabled(false);后不可编辑也不可点击 设置  setFocusable(false)后不可编辑,但是再设置 setFocusable(tr ...

随机推荐

  1. 【HTML】行内-块级-行块级

    行内元素 相邻元素可以在一行显示直到一行排不下才进行换行. 不可设置宽高,宽度随内容变化. padding和margin的设置中,水平方向(padding-left...)有效果,垂直方向无效果. 块 ...

  2. react 事件绑定 es5/es6

    // vscode shift + ctrl + v 预览 es 5 写法 无参函数的绑定 first methods 定义函数: handleClick(e) { // e - 事件对象 e.pre ...

  3. JS前端无侵入实现防止重复提交请求技术

    JS前端无侵入实现防止重复提交请求技术 最近在代码发布测试的过程中,我发现有些请求非常的消耗服务器资源,而系统测试人员因为响应太慢而不停的点击请求.我是很看不惯系统存在不顺眼的问题,做事喜欢精益求精, ...

  4. SPFA求最短路——Bellman-Ford算法的优化

    SPFA 算法是 Bellman-Ford算法 的队列优化算法的别称,通常用于求含负权边的单源最短路径,以及判负权环.SPFA 最坏情况下复杂度和朴素 Bellman-Ford 相同,为 O(VE), ...

  5. bzoj 5338: [TJOI2018]xor (树链剖分+可持久化01Trie)

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=5338 题面: 5338: [TJOI2018]xor Time Limit: 30 Sec  ...

  6. (十四)QFile操作,QByteArray,文件流操作,QTextStream,QDataStream,QFileInfo, QIODevice

    QFile f 1.readall #include "widget.h" #include "ui_widget.h" #include <QFileD ...

  7. Python爬虫之三

    1)使用Scrapy,什么叫做Scrapy Scrapy,Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据 ...

  8. Java线程池源码解析

    线程池 假如没有线程池,当存在较多的并发任务的时候,每执行一次任务,系统就要创建一个线程,任务完成后进行销毁,一旦并发任务过多,频繁的创建和销毁线程将会大大降低系统的效率.线程池能够对线程进行统一的分 ...

  9. 暑假闲着没事第一弹:基于Django的长江大学教务处成绩查询系统

    本篇文章涉及到的知识点有:Python爬虫,MySQL数据库,html/css/js基础,selenium和phantomjs基础,MVC设计模式,ORM(对象关系映射)框架,django框架(Pyt ...

  10. kaldi chain模型的序列鉴别性训练代码分析

    chainbin/nnet3-chain-train.cc int main(int argc, char *argv[]) { ... Nnet nnet; ReadKaldiObject(nnet ...