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;

}

}

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！