jquery动态报表
jquery动态表格
我的实现方法是：在需要编辑的字段位置放一个div和一个input来回切换。本来我是想用一个input就行了，改变其css和属性也能实现，可其中还有个select，怎么改变其css都无法去掉右边的三角，为了风格统一都用div切换了，上代码
html代码：
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-->
html代码
<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代码
js代码
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;
}
}
