JSP表单是隔行扫描的

电脑杂谈  发布时间:2020-03-31 01:12:56  来源:网络整理

jsp表格美化_jsp表格美化_jsp美化

在设计网站或信息系统时,数据量巨大且数量众多,因此如何在页面上有效显示数据很大程度上决定了系统的人性化设计理念.

当前数据显示的最常见组织方法是“表”. 当一个表显示多行时,我们将其更改为“隔行颜色”,以提高数据的用户友好性. “突出显示”使用户可以轻松地关注感兴趣的数据.

大约有三种方法可以实现隔行数据更改: CSS,JavaScript和jQuery.

下面我们有一个编写良好的CSS代码jsp表格美化,该代码分为3种不同的方式并应用于我们的数据表.

Style.css常见的CSS代码如下:

jsp表格美化_jsp美化_jsp表格美化

wKioL1M-I3HQQg4XAAIOCpGWJSg164.jpg

需要实现的数据表样式如下:

wKiom1M-I7PznXk-AAFVgUW17m0691.jpg

表数据的HTML代码:

wKioL1M-I6vT-nn9AAKu6tHBDpk194.jpg

jsp表格美化_jsp美化_jsp表格美化

1. CSS实现隔行表格颜色

实现CSS控制表方法的代码相对简单. 您只需要添加

标签: class =“ datalist”,并为每个奇数或偶数行添加标签: class =“ altrow”就可以了.

2. JavaScript中的隔行表格颜色

将JavaScript代码添加到HTML页面中的标记中:

wKiom1M-I-3Qjh6nAAD4smn4-90035.jpg

jsp表格美化_jsp表格美化_jsp美化

3,交错表颜色的jQuery实现

在HTML页面中引入jQuery库文件,并在标记中添加相应的JavaScript代码:

wKioL1M-I-ChqEo2AADcXGdQLNc305.jpg

可以看出,使用jQuery非常容易达到隔行变色的效果,这也是我建议大家使用的一种方法.

要下载jQuery库文件,读者可以访问官方网站: 下载. 下载的库文件只是一个简单的普通JS文件.

jsp美化_jsp表格美化_jsp表格美化

4. jQuery实现表行数据突出显示

使用jquery鼠标经过时突出显示表格数据也非常容易. 它只需要几个简短的jquery代码:

wKiom1M-JB-zYBMPAACljlONwsw389.jpg

以上代码可以添加到HTML页面的JS文件中,也可以放置在HTML页面的标记的

  • 马冉
    马冉

    稍有政治常识的人们都很清楚

热点图片
拼命载入中...