jsp表格左右滑动.docx
- 文档编号:25545215
- 上传时间:2023-06-09
- 格式:DOCX
- 页数:10
- 大小:19.17KB
jsp表格左右滑动.docx
《jsp表格左右滑动.docx》由会员分享,可在线阅读,更多相关《jsp表格左右滑动.docx(10页珍藏版)》请在冰豆网上搜索。
jsp表格左右滑动
竭诚为您提供优质文档/双击可除
jsp,表格左右滑动
篇一:
jsp+js实现可排序表格
首先,定义一个js:
tablesort.js:
functionsort(tableid,sortcolumn,nodetype){
vartable=document.getelementbyid("thetable");
vartablebody=table.tbodies[0];
vartableRows=tablebody.rows;
varrowarray=newarray();
for(vari=0;i rowarray[i]=tableRows[i];
}
if(table.sortcolumn==sortcolumn){
rowarray.reverse();
}else{
rowarray.sort(generatecomparetR(sortcolumn,nodetype));
}
vartbodyFragment=document.createdocumentFragment();
for(vari=0;i tbodyFragment.appendchild(rowarray[i]);
}
tablebody.appendchild(tbodyFragment);
table.sortcolumn=sortcolumn;
}
functiongeneratecomparetR(sortcolumn,nodetype){
returnfunctioncomparetR(trleft,trRight){
varleftValue=convert(trleft.cells[sortcolumn].firstchild.nodeValue,nodetype);
varrightValue=convert(trRight.cells[sortcolumn].firstchild.nodeValue,nodetype);if(leftValue return-1;
}else{
if(leftValue>rightValue){
return1;
}else{
return0;
}
}
};
}
functionconvert(value,datatype){
switch(datatype){
case"int":
returnparseint(value);
case"float":
returnparseFloat(value);
case"date":
returnnewdate(date.parse(value));
default:
returnvalue.tostring();
}
}
然后是使用:
stringpath=request.getcontextpath();
stringbasepath=request.getscheme()+":
//"
+request.getservername()+":
"+request.getserverport()
+path+"/";
%>
">
myjsptabel.jspstartingpage
ription"content="thisismypage">
-->
标题1
标题2
标题3
标题4
标题5
标题6
标题7
23456723
篇二:
表格的处理与图文混排.jsp
实验七表格的处理与图文混排
一、实验目的
1.掌握word20xx中表格的使用。
2.学会在word20xx实现图文混排的效果。
3.了解图形的绘制与编辑。
4.掌握页面设置与打印。
二、预备知识
1.表格
word20xx具有很强的表格编辑功能,可以制作多种格式的表格。
表格的基本单元称为单元格即表格中的每一个小格。
word20xx将每一个单元格中的内容作为一个子文档处理,与其他文档的处理方法同样。
2.表格中的数据处理
表格中的数据处理主要有排序和计算。
3.绘图工具
word20xx提供丰富的绘图工具栏,可方便、快捷地绘制出各种图形。
4.艺术字
艺术字是一种特殊的文字效果,也是一种图形。
5.文本框
文本框是一个图形对象,文本框中可以输入文本、插入图形、图片、艺术字等。
文本框可放在任意一个位置,文本框分为横排方框和竖排文本框。
三、实验内容与实验过程
1.在d盘新建一个word文档,名为“表1.doc”,在文档中完成表格制作,表内容如表7-1所示。
表7-1学生成绩表
表的制作方法有多种:
方法一:
利用工具栏中“插入表格”按钮。
①新建一个word文档。
②单击“常用”工具栏中的“插入表格”按钮(表格。
④在表格中输入表格中内容,保存文档,输入文件名为“表1.doc”。
)。
③按住鼠标左键拖动,选择满足需要的7行和4列如图7-1所示,然后放开鼠标,在插入点出现创建的
图7-1创建7行4列的表格图7-2“插入表格”对话框
方法二:
利用“插入表格”命令。
①新建一个word文档。
②单击【表格】|【插入表格】命令,打开“插入表格”对话框,如图7-2所示。
③设置表格的参数。
“列数”设为4列、“行数”设为7行。
“自动调整”选项组用来设置表格每列的宽度,采用默认值。
④单击“确定”按钮,就可以生成所需的表格。
⑤输入表格内容,保存文档,输入文件名为“表1.doc”。
2.在“表1.doc”文档的“计算机基础”的右边插入一列,列标题为“平均分”,并计算各人的平均分;在表格的最后增加一行,行标题为“各科平均”,并计算各科的平均分。
①打开文档“表1.doc”。
②将光标移至表格右侧,单击【表格】|【插入】|【列(在右侧)】命令,在第一行输入“平均分”。
③将光标移至表格下方,单击【表格】|【插入】|【行(在下方)】命令,在第一列输入“各科平均”。
结果如表2所示。
表7-2学生成绩表
④将光标移至平均分下一个单元格,单击【表格】|【公式】命令,打开如图7-3所示,在“粘贴函数”选择“aVeRage”即可,括号中输入“leFt”,表示对单元格的左侧进行求平均数,单击确定按钮,完成“王志平”平均成绩的求解,用同样的方法完成其他同学平均成绩的求解。
图7-3“公式”对话框
④将光标移至各科平均单元格右边,单击【表格】|【公式】命令,打开如图7-3所示,在“粘贴函数”选择“aVeRage”即可,把括号内“leFt”改成“aboVe”,表格对单元格的上方求平均数,单击确定按钮,完成“高等数学”平均成绩的求解,用同样的方法完成其他各科平均成绩的求解。
。
⑤单击按工具栏图标“
”保存。
3.将“表1.doc”文档中表格第一行的行高设置为1.5厘米最小值,该行文字为粗体、小三,并水平、垂直居中;其余各行的行高设置为1.3厘米最小值,文字垂直底端对齐。
①打开文档“表1.doc”,选中表格中第一行。
②单击【表格】|【表格属性】命令,打开如图7-4所示的“表格属性”对话框。
③进行字体设置,参照前面的字体设置。
水平居中按工具栏中“【单元格】选项卡时行选择。
④其他各行设置参照以上步骤,保存。
”按钮,垂直居中选择【表格属性】|
图7-4“表格属性”对话框“行”选项卡图7-5“边框和底纹”
4.将“表1.doc”文档中表格的外框线设置为1.5磅的蓝色双线,内框线为0.75磅绿色单线,对第一行与最后一行添加10%的底纹。
①打开文档“表1.doc”。
②选中表格,单击【格式】|【边框和底纹】命令,打开“边框和底纹”对话框,如图7-5所示,在对话框中选择“自定义”,线型选择“双线”,颜色选择“蓝色”,宽度选择“1.5磅”,单击“预览”的外边框,以同样的方法设置内框线。
③在对话框中选择【底纹】选项卡进行设置,另存为“表2.doc”。
5.在表格的上面插入一行,合并单元格,然后输入标题“成绩表”,格式为黑体、二号、居中;在表格下
面插入当前日期,格式为粗体、倾斜。
①打开文档“表2.doc”。
②单击【表格】|【插入】|【行在上方】命令,这时在表格的上方插入一行表格。
③选中第一行,单击【表格】|【合并单元格】命令,将第一行中的表格合并为一个单元格。
④在第一行中输入文字“成绩表”,设置字体格式:
黑色,二号,居中。
⑤在表格的下方,单击【插入】|【时间和日期】命令,出现时间和日期,进行字体设置格式为粗体、倾斜。
⑥按工具栏中“
”进行保存。
6.将文档“春2.doc”打开,并改名为“春3.doc”。
在正文第2段右侧设置竖排文本框,文本框中的文字是“春”:
字体为黑体小一号字,文字为紫色;文本框填充浅绿色;“四周环绕”且“左对齐”方式;阴影为样式5,阴影颜色取棕黄色。
①打开“春2.doc”文档,单击【文件】|【另存为】命令,在打开的另存为对话框文件名位置输入文件名“春3.doc”。
②单击【插入】|【文本框】|【竖排】命令,输入文字,为字体进行格式设置:
黑体小一号字,字体颜色为紫色。
③选中文本框,按右键出现对话框,选择“设置文本框格式”,如图7-6所示。
图7-6“设置文本框格式”的版式选项卡图7-7阴影设置
④选中文本框,选择工具栏中阴影设置图标,如图7-7所示,阴影为样式5,阴影颜色取棕黄色。
7.在文档“春3.doc”中,将图形(任选一春天的剪贴画)插入到正文第5段中间,设定其环绕方式为“四周型”且“两边”方式。
①打开文档“春3.doc”,单击【插入】|【图片】|【剪贴画】命令,打开“剪贴画”任务窗格。
②在“搜索文字”文本框中输入搜索关键字,在“搜索范围”和“结果类型”进行选择。
单击“搜索”按钮,将显示符合条件的所有剪贴画。
③鼠标指针指向某个剪贴画,单击剪贴画右侧的箭头按钮,在弹出的菜单中选择“插入”命令;或者直接单击该剪贴画
④右单击要设置格式的图片,在弹出式菜单中单击【设置格式图片】打开“设置图片格式”对话框,在对话框中选择【版式】选项卡,单击“高级”按钮,在“文字环绕”选项卡中选择“四周型”,文字环绕选择“两边”,单击“确定”按钮。
8.将文档标题改为艺术字;采取艺术字库中第1行第1个样式;字体为隶书,取“上下型”环绕方式;艺术字形状取波形1,填充天蓝色;阴影取样式2,阴影颜色取灰—25%。
①单击【插入】|【图片】|【艺术字】命令,打开如图7-8所示的“艺术字库”对话框,选择样式。
图7-8“艺术字库”对话框图7-9“编辑艺术字”对话框
②出现编辑“艺术字”文字对话框,输入标题内容,如图7-9所示,进行字体设置。
③右击艺术字出现“设置艺术字格式”进行设置。
9.将图形(自定)插入到第4段的左下角,为图形添加红色虚线外框;设定其环绕方式为四周环绕且“右边”方式。
①单击【插入】|【图片】|【自选图形】命令。
②在自选图形框中任意选一个图形,例如选择“笑脸”,这时鼠标变成了“十”形,这时可以绘出图形了。
③选中图形,按右键出现“设置自选图形格式”进行设置。
四、巩固练习
1.建立如下的一个表格,并对表格进行操作,并以文件名“表格.doc”保存。
①在表格的上方加标题“学生成绩表”,并设置表标题文字为黑体,三号,居中对齐;设置表内字号为小四号,字体为隶书,水平对齐方式为左对齐,垂直对齐方式为居中。
②在表格的右侧加一列,列标题为“总分”,在表格的下方加一行,行标题为“各科平均分”。
③将表格外边框线设置为3磅红色单实线;表格内框线设置为0.75磅蓝色单实线。
④设置表格各列宽度分别为3,2,3,3,5厘米。
⑤利用公式计算总分和各科平均分,并设置保留一位小数,
2.报纸的编排(设计实验)以下是一报纸的编排,参照如下例题进行设计。
①内容自定。
②要求报纸中含文本框(横排、竖排)、图片、艺术字等。
③要求设计边框和底纹。
篇三:
jsp分类表格绘制,pageencoding及sriptlet的注意事项
关于分类表格的绘制问题。
分类+值
若采用标签库和el表达式,则之不能在后台绘制,或则后台绘制的不执行。
若没有则可以全部在后头绘制,然后传递到页面(dom能识别的元素)即可。
以下方法有构造完整表,有构造表分类的,若构造完整表需要dom自持,所以只能是dom语言;若构造分类表,则在页面绘制值部分。
后台代码传到前台可以用,也可用el表达式。
/**
**@title:
constructarrayincludeValue*@description:
构造二维数组,最后一列或最后一行做为值。
*@param@paraml为待分类的集合,存放形式是从大到小;spantype为排列类型,参数值(rowspan,colspan),默认为rowspan
*@param@return
*@returnstring[][]返回类型*@authorbill*@20xx20xx-11-21下午12:
21:
30*/publicstaticstring[][]if(l==null||l.size()==0||l.get(0).size()==0)returnnull;intrownumber=l.size();intcolumnnumber=l.get(0).size();string[][]args=null;intbasepostion=0;if(spantype==null||spantype.length==0||constructarrayincludeValue(list>l,string...spantype){
spantype[0].equals("rowspan")){//横放
args=newstring[columnnumber][rownumber];
for(intj=0;j );
if(i-basepostion==1)args[basepostion][j]=l.get(j).get(basepostionelse
args[basepostion][j]=l.get(j).get(basepostion)+"===="+"rowspan="+(i-basepostion)+"";
}}}}args[i][j]=l.get(j).get(i);basepostion=i;if(i==columnnumber-1){}args[i][j]=l.get(j).get(i);}else{}elseif(spantype!
=null
);
else
args[j][basepostion]=l.get(j).get(basepostion)+"===="+"colspan="+(i-basepostion)+"";
basepostion=i;if(i==columnnumber-1){}args[j][i]=l.get(j).get(i);for(intj=0;j }}}}}args[j][i]=l.get(j).get(i);}else{returnargs;
/**
**@title:
constructarrayuncludeValue*@description:
构造二维数组。
所有值都当做分类*@param@paraml为待分类的集合,存放形式是从大到小;spantype为排列类型,参数值(rowspan,colspan),默认为rowspan
*@param@return
*@returnstring[][]返回类型*@authorbill*@20xx20xx-11-21下午12:
21:
30*/publicstaticstring[][]if(l==null||l.size()==0||l.get(0).size()==0)returnnull;intrownumber=l.size();intcolumnnumber=l.get(0).size();string[][]args=null;intbasepostion=0;if(spantype==null||spantype.length==0||constructarrayuncludeValue(list>l,string...spantype){
spantype[0].equals("rowspan")){//横放
args=newstring[columnnumber][rownumber];
for(intj=0;j +(i-basepostion+1)+"";
);
else
args[basepostion][j]=l.get(j).get(basepostion)+"===="+"rowspan="+(i-basepostion)+"";
}}}basepostion=i;if(i==columnnumber-1){}args[i][j]=l.get(j).get(i);}}else{if(i-basepostion==1)args[basepostion][j]=l.get(j).get(basepostion}elseif(spantype!
=null
);
else
args[j][basepostion]=l.get(j).get(basepostion)+"===="+"colspan="+(i-basepostion)+"";
}}basepostion=i;if(i==columnnumber-1){}args[j][i]=l.get(j).get(i);for(intj=0;j }}}returnargs;
/**
**@title:
drawtableuncludeValue*@description:
绘制表格的分类部分*@param@paramargs(已构造好的二维数组)*@param@paramtablestyle(表格的属性集,例如"width=\"100%\"
class=\"table\"border=\"1\"cellpadding=\"4\"cellspacing=\"0\"")*@param@return
*@returnstring返回类型(带有table标签的字符串)*@authorbill*@20xx20xx-11-21下午03:
38:
58*/publicstaticstringdrawtableuncludeValue(string[][]args,stringtablestyle,booleanhaslinenumber,intstart,intstep,string...spantype){
if(args==null||args.length==0)return"";intrownumber=args.length;intcolumnnumber=args[0].length;string[]tp=null;tablestyle=tablestyle==null"":
tablestyle;stringbuffersb=newstringbuffer("");for(inti=0;i");if(haslinenumbermiddlewidth=100>第");sb.append(start);start=start+step;spantype[0].equals("rowspan"))){sb.append("行");}for(intj=0;j第");sb.append(start);start=start+step;sb.append("列");&&spantype[0].equals("colspan")&&j==0)){
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jsp 表格 左右 滑动