转载:http://www.verydemo.com/demo_c110_i4975.html
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;
}
}
我的实现方法是:在需要编辑的字段位置放一个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;
}
}
相关推荐
使用jquery生成报表,使用时只需根据想要的实例加以修改即可使用 很多示例,报表也很漂亮 都是动态的
zip包含:两款免费的jquery报表插件
使用jquery作为技术支持的JS图形报表插件
3种超炫 jquery 报表插件(柱状,饼图,曲线)
JQuery实现可以动态增加行的报表
jquery做的报表,各种曲线都有例子。 2个纵坐标的也有
Jquery报表插件
jquery 图形报表实例源码,可以直接运行,自己写的,已经通过测试,希望对大家有用
经典JQuery柱状报表-Highcharts Examples 提供多种样式风格支持,是您学习研究以及项目应用的绝佳选择。
jquery 图形报表插件jqplot 简介及参数详解
挺好用的jquery报表统计图插件,各种效果的统计图都可以实现。
动态报表 jquery报表 报表 图形报表,饼状图,柱状图,线形图,综合显示图,动态显示哟!
两个图形报表插件,可以通过数据表简单的创建图形报表,柱状图,线性图,饼图
报表制作 曲线图 饼图 折线图 jquery.jqplot水晶报表 制作图表,统计,汇总,预测比较实用,结合流行的jquery技术,更是能大大提高工作效率,使用的灵活性高,可以做出动态、时时的效果。
一款简单实用的jQuery动态表格数据分页插件,动态获取表格数据,支持自定义设置分页参数。
dwr结合jQuery实现Ajax技术 ,Oracle作为后台数据库,jxl + poi报表
非常不错的jquery报表插件 线型报表 圆形报表 柱状报表
能够根据数据自动生成各种各样的图形报表,很实用,很方便!
NULL 博文链接:https://bestwinner.iteye.com/blog/694297