简单描述:开发中遇到一个小困难,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. HDU 6468 zyb的面试

    http://acm.hdu.edu.cn/showproblem.php?pid=6468 题目 今天zyb参加一场面试,面试官听说zyb是ACMer之后立马抛出了一道算法题给zyb:有一个序列,是 ...

  2. 《java核心技术36讲》学习笔记-------杨晓峰(极客时间)

    非常荣幸作为晓峰哥的同事,之前就看过这篇文章,重写读一遍,再学习学习. 一.开篇词 初级.中级:java和计算机科学基础.开源框架的使用:高级.专家:java io/nio.并发.虚拟机.底层源码.分 ...

  3. python并发编程之多线程基础知识点

    1.线程理论知识 概念:指的是一条流水线的工作过程的总称,是一个抽象的概念,是CPU基本执行单位. 进程和线程之间的区别: 1. 进程仅仅是一个资源单位,其中包含程序运行所需的资源,而线程就相当于车间 ...

  4. laravel带参数分页

    <!---分页--> <div id="pagination-box"> {{ $list->appends(['mobile'=>$mobil ...

  5. 理解vue 修饰符sync

    也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...

  6. 快速找出网站中可能存在的XSS漏洞实践

    笔者写了一些XSS漏洞的挖掘过程记录下来,方便自己也方便他人. 一.背景 在本篇文章当中会一permeate生态测试系统为例,笔者此前写过一篇文章当中笔者已经讲解如何安装permeate渗透测试系统, ...

  7. 同样级别iOS程序员,为啥比我菜的程序员薪资都比我高?

    前言: 作为程序员,都有一种相同的焦虑——即当一次又一次的新技术浪潮袭来,总会不由自主的拼命跟随,总是担心如果不紧跟新技术的潮流,将会被时代所抛弃. 害怕年龄,害怕平庸,其实只是你在现实里的努力无法支 ...

  8. marquee标签的使用

    marquee语法    <marquee></marquee> 实例一<marquee>Hello, World</marquee> marquee常 ...

  9. ActiveMQ 的安装与使用(单节点)

    环境:CentOS6.6.JDK8 1.下载:http://archive.apache.org/dist/activemq/5.11.1/apache-activemq-5.11.1-bin.tar ...

  10. HBase基本概念与基本使用

    1. HBase简介 1.1 什么是HBase HBASE是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBASE技术可在廉价PC Server上搭建起大规模结构化存储集群. HBASE ...