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;  
        }  
}