jquery写的一个表格的动态修改删除行
<div style="color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background-color: #ffffff; margin: 8px;">学了一段时间的JQUERY，正好项目要添加个小功能，于是自报奋勇来担认UI设计。本来想找个表格的插件，发现大多太笨重，我要的功能挺简单的，于是就想自己做一个得了，费话少说先上图片
http://www.agoit.com/upload/attachment/66119/55d58331-ebf7-3dba-8c05-1e261e721901.bmp
功能很简单就是用AJAX动态修改一行里的一个字段，比如选中一行点击“修改单位”时，这一行的单位编号字段就最成可编辑的，右边出来个保存按钮，修改完后点保存就行。如果选中另一行，当前可编辑的字段都变成不可编辑的。
http://www.agoit.com/upload/attachment/66133/3546a183-901f-342b-a16c-7a2e4a8e0dbd.bmp
我的实现方法是：在需要编辑的字段位置放一个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').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的查询功能太爽了，越来越喜戏它了http://www.agoit.com/images/smiles/icon_biggrin.gif
页:
[1]