`
zlping
  • 浏览: 63838 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery写的一个表格的动态修改删除行

    博客分类:
  • js
阅读更多

学了一段时间的JQUERY,正好项目要添加个小功能,于是自报奋勇来担认UI设计。本来想找个表格的插件,发现大多太笨重,我要的功能挺简单的,于是就想自己做一个得了,费话少说先上图片  


功能很简单就是用AJAX动态修改一行里的一个字段,比如选中一行点击“修改单位”时,这一行的单位编号字段就最成可编辑的,右边出来个保存按钮,修改完后点保存就行。如果选中另一行,当前可编辑的字段都变成不可编辑的。



 

我的实现方法是:在需要编辑的字段位置放一个div和一个input来回切换。本来我是想用一个input就行了,改变其CSS和属性也能实现,可其中还有个select,怎么改变其css都无法去掉右边的三角,为了风格统一都用div切换了,上代码

 

HTML代码:

 

    <tr>
      <td><input name="radiobutton" type="radio" class="radiobutton" value="<bean:write name='card' property='sn'/>"></td>
      <td><bean:write name='card' property='sn'/><input name="sn" type="hidden" id="sn" value="<bean:write name='card' property='sn'/>"></td>
      <td><div id="hiddenuid"><bean:write name='card' property='u_id'/></div><input name="uid" type="text" maxlength="6" class="hiddenInput" id="uid" value="<bean:write name='card' property='u_id'/>"></td>
      <td><script>document.write(showFlag("<bean:write name='card' property='flag'/>",false))</script>
      </td>
      <td><bean:write name='card' property='duration'/></td>
      <td><div id="hiddendate"><bean:write name='card' property='expiredate'/></div><input name="date" type="text" class="hiddenInput" id="date" value="<bean:write name='card' property='expiredate'/>" size="10"></td>
      <td><bean:write name='card' property='createdate'/></td>
      <td><input name="button" type="button" class="saveInput" id="save" value="保存"></td>
    </tr>

 

        <td width="76"><input name="button5" type="button" id="modifyUID" value="修改单位 "></td>
        <td width="91"><input name="button4" type="button" id="modifyFlag" value="是否激活"></td>
        <td width="41"><input name="button3" type="button" id="modifyDate" value="续费"></td>
        <td width="38"><input name="button2" type="button" id="delSN" value="删除"></td>

 

 

 

jquery代码

 

var index;
//初始化
$(function(){ 
		   index=$('input:checked').parent().parent();	//初始化index变量,刚开始的行
		   $('.listTable tr:gt(0):even').addClass('alt');//隔行变颜色
		   $('#modifyUID').click(function(){	//为"修改单位"邦定事件
		   	  if(isChecked()){
			  	showInput('uid');
			  }
		   });
		   $('#modifyFlag').click(function(){	//为"是否激活"邦定事件
		   	  if(isChecked()){
			  	showInput('flag');
			  }
		   });
		   $('#modifyDate').click(function(){	//为"续费"邦定事件
		     if(isChecked()){
			 	$('input:checked').parent().parent().find('#date').calendar();	//邦定日历						
			  	showInput('date');
			  }
		   });
		   $('.saveInput').click(function(){	//为"保存"邦定事件
			  saveUpdate(this);
		   });
		   $('#delSN').click(function(){	//为"删除"邦定事件
		   	  if(isChecked()){
			  	delSN();
			  }
		   });
		   $('.radiobutton').click(function(){	//当选择其它行时,隐藏当前行中的表单
			  cancelHiddenInput($(index).parent().parent());
			  index = this;
		   });
		   $('.radiobutton').each(function(){	//如果单选框没有值则为disabled
		   		if($(this).val()==''){
		   			$(this).attr('disabled','disabled');
		   		}
		   });

		   $('input[@name=uid]').change(function(){
		   		if(this.lenght>6){
		   			return false;
		   		}
		   });
});
//是否有一条记录选择
isChecked = function(){	
	if($('input:checked').length==0){
		alert('请先选择一条记录!');
		return false;
	}
	return true;
}
//隐藏表单
saveHidenInput=function(tr){
	tr.find('.showInput').attr('class','hiddenInput');
	tr.find('#save').css('visibility','hidden');
	tr.find('#hiddenflag').html(showSelect(tr.find('#flag').val())).removeAttr('class');
	tr.find('#hiddenuid').html(tr.find('#uid').val()).removeAttr('class');
	tr.find('#hiddendate').html(tr.find('#date').val()).removeAttr('class');
}

cancelHiddenInput = function(tr){
	tr.find('.showInput').attr('class','hiddenInput');
	tr.find('#save').css('visibility','hidden');
	tr.find('#uid').val(tr.find('#hiddenuid').html());
	tr.find('#date').val(tr.find('#hiddendate').html());
	tr.find('div[id*=hidden]').removeAttr('class');
}
//显示表单
showInput=function(id){
	var tr = $('input:checked').parent().parent();
	var showInput = tr.find('#'+id);
	var hiddenInput = tr.find('#hidden'+id);
	tr.find('#save').css('visibility','visible');
	showInput.attr('class','showInput');
	hiddenInput.attr('class','hiddenInput');
}

//保存方法
saveUpdate=function(id){
	var tr = $(id).parent().parent();
	var sn = tr.find('#sn').val();
	var uid = tr.find('#uid').val();
	var flag = tr.find('#flag').val();
	var date = tr.find('#date').val();
	var olddate = tr.find('#hiddendate').html();
	if(uid.length>6){
		alert('单位编号不能大于6位!');
		return false;
	}else if(date<olddate){
		alert('续费后日期不能小于原来日期!');
		return false;
	}
	$.ajax({
		type:'post',
		url:'adminCardDYKJMgrAction.do',
		datatype:'json',
		data:'action=modifyCard&u_id='+uid+'&flag='+flag+'&expiredate='+date+'&sn='+sn,
		success:function(){
			saveHidenInput(tr);
		},
		error:function(){
			alert('系统出现错误,保存失败!');
		}
	});
}
//删除方法
delSN = function(){
	if(confirm('是否要删除!')){
		var tr = $('input:checked').parent().parent();
		var sn = tr.find('#sn').val();
		$.ajax({
			type:'post',
			url:'adminCardDYKJMgrAction.do',
			datatype:'json',
			data:'action=delCard&snid='+sn,
			success:function(){
				tr.remove();
			},
			error:function(){
				alert('系统出现错误,删除失败!');
			}
		});
	}
}
showSelect = function(flag){
	var str;
	if(flag=='1'){
		str='已激活';	
	}else{
		str='未激活';
	}
	return str;
}

function showFlag(id,y){
		var str;
		var str2;
		if(id=='0'){
			str=str+'<option value="">请选择</option>';
			str=str+'<option value="0" selected="selected">未激活</option>';
			str=str+'<option value="1">已激活</option>';
			str2='<div id="hiddenflag">未激活</div>';
		}else if(id=='1'){
			str=str+'<option value="">请选择</option>';
			str=str+'<option value="0">未激活</option>';
			str=str+'<option value="1" selected="selected">已激活</option>';
			str2='<div id="hiddenflag">已激活</div>';
		}else{
			str=str+'<option value="" selected="selected">请选择</option>';
			str=str+'<option value="0">未激活</option>';
			str=str+'<option value="1">已激活</option>';
			str2='<div id="hiddenflag"></div>';
		}
		str=str+'</select>';
		if(y==true){
			return '<select name="flag" id="flag">'+str;
		}else{
			return str2+'<select name="flag" id="flag" class="hiddenInput">'+str;
		}
}

 

 

 

总结:写的有些粗糙,不过功能都实现了,这个代码不能直接用,因为代码不全,而且后台java代码没有。只做学习用。

 

感觉jquery的查询功能太爽了,越来越喜戏它了

  • 大小: 13.5 KB
  • 大小: 4.9 KB
分享到:
评论
3 楼 马锋超 2012-08-07  
你的这个完整项目能给我学习下吗?  急用.   麻烦发送到我的邮箱 403048846@qq.com
  谢谢
2 楼 zhangpurple 2011-12-08  
有完整的发一下 1322646730@qq.com
1 楼 xiaogu2008 2011-09-27  
good

相关推荐

    jquery 动态增加删除表格. 实例

    这段代码中,`addRow`函数创建一个新的表格行,包含三个文本输入框和一个删除按钮。`removeRow`函数接收一个事件对象`e`,并查找与该事件相关的删除按钮,然后移除该按钮所在的行。`$("#addButton")`是添加按钮的ID...

    利用jquery给指定的table动态添加一行、删除一行的方法

    jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个表格由`&lt;table&gt;`元素包含,其中包含`&lt;tr&gt;`(行)和`&lt;td&gt;`(单元格)。使用jQuery,...

    JQuery实现动态表格点击按钮表格增加一行

    在使用JQuery来实现动态表格增加行的场景中,主要涉及到的技术点包括: 1. DOM操作:文档对象模型(DOM)允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中,DOM操作用于动态地向表格中插入新的...

    jQuery表格编辑添加删除行插件.zip

    总结来说,“jQuery表格编辑添加删除行插件”是一个强大的工具,它结合了jQuery的便利性和JSON的灵活性,使得在网页中构建可编辑的表格变得轻而易举。通过深入学习和应用这个插件,开发者可以提升项目中表格组件的...

    jQuery表格内容修改删除代码.zip

    综上所述,"jQuery表格内容修改删除代码"是一个实用的前端开发工具,它利用jQuery的灵活性和Bootstrap的美观性,实现了表格的动态编辑和删除功能,为网页的数据展示带来了更多的可能性。开发者可以根据自己的需求...

    jQuery实现表格动态修改和隐藏 实例

    `$("tr").append("新单元格&lt;/td&gt;")`会在每一行末尾添加新的单元格,而`$("tr:last").remove()`则会删除最后一个行。 4. **隐藏和显示表格**:要隐藏表格,可以使用`$("table").hide()`,反之,使用`$("table").show...

    使用JQuery实现的动态编辑表格

    需要动态编辑表格,但是layui的编辑表格只适合 【有数据】修改功能用,并不适合【无数据】新增的功能使用,所以本人研究了几日,才写出了这么一个 无数据绑定,当然也可以自行绑定数据源,并且可以新增空白行,直接...

    jquery动态添加 删除指定行元素

    总的来说,动态添加和删除表格行是前端开发中常见的功能,jQuery提供了简洁而强大的API来处理这类任务。通过理解并运用`add()`和`del()`函数,开发者可以轻松地实现这些功能,同时还能根据具体场景进行优化和扩展。

    jquery入门之动态表格---动态添加删除一行

    通过这种方式,我们就可以创建一个功能完善的动态表格,用户既可以方便地添加新行,也可以轻松删除不需要的行。这只是一个基础示例,实际应用中可以根据需求进行更复杂的功能扩展,比如数据验证、异步加载等。

    jQuery表格编辑添加删除行代码.zip

    在"jQuery表格编辑添加删除行代码"中,jQuery的主要作用是快速有效地操作DOM元素,使得用户界面的动态更新变得更加简单。 该代码的核心在于如何创建可编辑的表格。在`index.html`中,我们会看到一个基本的HTML表格...

    jQuery+Bootstrap表格内容修改删除编辑插件

    本主题聚焦于一个特定的应用场景:使用jQuery和Bootstrap创建具有内容修改、删除和编辑功能的表格插件。 首先,jQuery是一个轻量级的JavaScript库,它使得JavaScript编程更加简单、高效。jQuery的核心特性包括DOM...

    Jquery创建动态表格

    本文将深入探讨如何使用jQuery创建动态表格,这是一个常见的需求,特别是在数据展示和用户交互丰富的Web应用中。 首先,让我们理解动态表格的基本概念。动态表格指的是在网页加载后或用户操作时根据需要生成或更新...

    jquery动态增加修改删除表格,上移下移功能

    在这个“jquery动态增加修改删除表格,上移下移功能”的项目中,开发者利用jQuery实现了对表格的动态操作,这在网页数据展示和管理中非常常见。 首先,我们来理解这个项目的标题:“jquery动态增加修改删除表格,上移...

    jquery表格动态增删改及取数据绑定数据完整方案

    对于"动态增删表格",我们可以创建一个基础表格结构,然后利用jQuery动态生成或移除表格行(tr)。例如,当用户点击添加按钮时,我们可以创建一个新的tr元素,包含预定义的列结构,然后用.append()将其插入到表格中...

    jQuery实现表格的增加、修改、删除、保存代码

    删除表格行则需要监听一个删除按钮或链接,然后移除对应的`&lt;tr&gt;`元素: ```html &lt;!-- 在每行末尾添加一个删除按钮 --&gt; &lt;td&gt;Name1 &lt;td&gt;Age1 &lt;td&gt;&lt;button class="delete-btn"&gt;Delete&lt;/button&gt;&lt;/td&gt; ``` ```...

    jQuery+Bootstrap表格内容修改删除编辑插件.zip

    本资源"jQuery+Bootstrap表格内容修改删除编辑插件.zip"提供了一个实用的解决方案,它将流行的前端框架jQuery与Bootstrap相结合,实现了表格内容的动态修改、删除和编辑功能。下面我们将详细探讨这个插件的核心知识...

    jQuery表格内容修改删除代码.rar_beanu7y_jQuery表格内容修改删除代码_tightlydof

    在这个名为"jQuery表格内容修改删除代码.rar_beanu7y_jQuery表格内容修改删除代码_tightlydof"的压缩包中,重点是实现一个功能丰富的可编辑表格插件。这个插件允许用户直接在表格中进行内容修改和行的删除增加操作,...

    asp.net处理不规则表格 结合jquery处理不规则表格

    在ASP.NET开发中,我们经常会遇到需要处理不规则表格的情况,这些表格可能具有不同数量的行、列或者具有动态变化的结构。在这种情况下,结合jQuery的强大学习库,我们可以有效地管理和操作这些复杂的表格数据。以下...

    jquery插件,基于jquery的表格控件无刷新实现添加编辑删除统计功能

    本文将深入探讨一个基于jQuery的表格控件,该控件实现了无刷新的添加、编辑、删除和统计功能,以VS2008为开发环境,利用Ajax技术,结合JSON数据格式,为用户提供流畅的交互体验。 一、jQuery与Ajax基础 jQuery简化...

Global site tag (gtag.js) - Google Analytics