2 t2045817161 t2045817161 于 2016.09.27 10:37 提问

div效果,js jquery css 1C

SpringMVC Spring hibernate 项目,现在我从后台查询,将结果赋给了一个list,在JSP里循环输出list里面的内容,显示在一张表里,现在有个功能就是更改,当点击表格某一行最后面的更改后,我想在该行的下面显示出一个div层,这个div层是显示在两行之间的,div里面包括要更改的这行的信息,现在这个显示div的效果这么做呢,点击保存或关闭后这个div自动消失,只有1C币了

5个回答

ios_king
ios_king   2016.09.27 11:11

我觉得 你可以用jquery 的插件模态框 来做这个事情,不用div 第一方面div 显示在两行中间不美观。第二方面,模态框插件更容易控制 显示和 隐藏。更加美观
http://www.cnblogs.com/lhb25/p/15-jquery-modal-plugins.html 这个地址有很多这方面的插件

u011197448
u011197448   2016.09.27 11:14

没必要这么麻烦吧?我觉得你这种不想单独开一页或者弹出弹窗的话可以直接在本行进行操作,无非就行先进行dom元素的修改,比如有一行数据:
| 张三 | 12 | 男 | update
当点击update的时候把前边三列的内容分别取出来放到一个input或者select中替换掉原来的内容即可。

t2045817161
t2045817161 这种方法是以前做jisp的时候做的,做过,感觉效果不好,现在想做的这个因为效果炫酷些
接近 2 年之前 回复
quasimodo_es
quasimodo_es   2016.09.27 12:59

点击“更改”,通过jquery,在此tr下面插入一个 tr 用于编辑就行了,点击保存,再把这个tr删除掉;
jquery实现起来很简单的

a18210148948
a18210148948   2016.09.27 16:27

用f12找到某一行的tr的id(比如easyUI datagrid 表格中的tr的id="datagrid-row-r1-2-13"),然后用jQuery的方法after方法tr,比如grid_row2.after("

"+ul_list+"
"), 关闭的时候直接用jQuery的remove方法就可以啦$('#rowIndex_"+rowIndex+"_tr').remove();
showbo
showbo   Ds   Rxr 2016.09.27 21:26

生成表格的多生成一行你那个编辑的就行了,设置style display为none隐藏起来,点击编辑的时候显示出来搞定。。

你要高级点就用ajax动态加载数据,然后动态插入行,如点击列表行tr里面的编辑控件调用这些代码 $(this).closest('tr').after('...............')

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
实现页面从右往左侧滑入效果
html> html lang="en"> head> meta charset="UTF-8"> title>title> script src="js/jquery-2.1.4.js">script> style> html,body{ width:100%; height:100%;
js+css实现模态层效果
模态层——通过可配置的参数width,height,title以及content用来设定弹出的信息框显示的内容,并通过可配置参数container用来设定模态层显示的区域。
DIV飞入 抖动效果
$(document).ready(function() { $("#test").click(function() { $('#hello').show('slide', {direction: 'left'}, 1000,function(){ $( "#hello" ).effect( "shake");
用 js 实现“div的遮罩”效果
需求:点击“排序”按钮,生成div遮罩效果,如图: html代码:两个按钮 html代码:遮罩效果 排序 状态: 发文 收文 公文类型: 通知 公告 其中,id=bg 为遮罩背景,id=show 为遮罩显示内容。 下面是 cs
JS+CSS实现几个DIV层上下移动交换位置的效果
JS+CSS实现几个DIV层上下移动交换位置的效果 /* ul{   width:400px } li{   border:1px solid gray;   list-style:none } .txt{   padding:4px;   background-color:#ffffff } /*]]>*/ // window.onload=functi
JS、JQuery、CSS+DIV实例大全
(注意:本资源共约300个应用实例,以下是详细目录) 一、J Query实例大全 1)AjaxJavaScript资源 1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例
jQuery div层渐入渐出效果
function test() {             //渐入渐出方式1 —— 从左上角划出,从右下角 收回              $("#msg").show("fast");              $("#msg").hide("slow");              //渐入渐出方式2—— 从中间向四周展开划出,由四周向中间位置收回            
【HTML】- 实现展开与收起效果
javascript和jQuery分别实现实现展开与收起动画效果
js 实现div 闪烁并控制频次
js 实现 div 闪烁 并控制其闪烁次数 var oBox = document.getElementById("id"); //要闪烁的div id var timer = null; //定义时间器 var i = 0; clearInterval(timer); //先清空时间器 oBox.onmouseover = function(){ //当鼠标移入div时 清空
jQuery实现DIV层的收缩展开效果
有的时候我们需要这样一个效果,当鼠标悬浮在一个位置上时,这个悬浮事件会触发一个动画,jQuery实现的动画可以使得整体效果流程优美<!DOCTYPE html> <head> <title>jQuery实现DIV层的收缩展开效果-纵向</title> <meta charset="utf-8"> <script src="C:/jquery/jquery-2.1.4.mi