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

学了一段时间的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的查询功能太爽了，越来越喜戏它了

评论

3 楼 马锋超 2012-08-07  

你的这个完整项目能给我学习下吗?  急用.   麻烦发送到我的邮箱 [e-mail]
  谢谢

2 楼 zhangpurple 2011-12-08  

有完整的发一下 [e-mail]

1 楼 xiaogu2008 2011-09-27  

good