如何能实现表单隔行变色功能-领先建站CMS提供服务商我们专注于CMS建站产品的研发

kesion

<<返回列表上一个主题下一个主题打印本帖复制本帖地址

1797 查看	4 回复

主题：[求助]如何能实现表单隔行变色功能 [收藏主题]

转到：

q276592170 当前离线

47 主题	0 广播	0 粉丝

添加关注

级别:学前班

用户积分:50 分
登录次数:158 次
注册时间:2014/2/25
最后登录:2015/8/2

当前不在线

q276592170 发表于：2015/2/26 12:24:58 | 只看该作者查看该作者主题楼主

做考试题库就用#科汛在线考试系统!

调用出来的表单行很多行的时候？如何实现表单的隔行变色功能，或者鼠标经过后的，整行变色也行，看看有高懂css的没有给一个建议。

有课程找生源就上科汛课堂街

反对(0)

回到顶部

回到底部

底部

春上秋下当前离线

521 主题	9 广播	20 粉丝

添加关注

级别:五年级

用户积分:5627 分
登录次数:635 次
注册时间:2010/6/1
最后登录:2024/6/24

当前不在线

春上秋下发表于：2015/2/26 16:29:48 | 只看该作者查看该作者主题沙发

做在线知识付费选科汛云开店

有课程找生源就上科汛课堂街

请看这个贴子~http://bbs.kesion.com/forumthread-1116212.html

科汛商学院助您快速入门

反对(0)

回到顶部

回到底部

底部

q276592170 当前离线

47 主题	0 广播	0 粉丝

添加关注

级别:学前班

用户积分:50 分
登录次数:158 次
注册时间:2014/2/25
最后登录:2015/8/2

当前不在线

q276592170 发表于：2015/2/26 17:37:48 | 只看该作者查看该作者主题藤椅

科汛智能建站系统

有生源找课程就上科汛课堂街!

春上秋下，你这个隔行代码我先收藏，先谢你了哈 :time:

:time:

做考试题库就用#科汛在线考试系统!

反对(0)

回到顶部

回到底部

底部

q276592170 当前离线

47 主题	0 广播	0 粉丝

添加关注

级别:学前班

用户积分:50 分
登录次数:158 次
注册时间:2014/2/25
最后登录:2015/8/2

当前不在线

q276592170 发表于：2015/2/26 17:40:16 | 只看该作者查看该作者主题板凳

科汛在线考试系统(NET)

做官网就用科汛智能建站系统!

另外鼠标放上后，整行换色我也弄出来了。一同与大家分享。

[loop={@num}]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<!--
.datalist{
border:1px solid #0058a3; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
background-color:#eaf5ff; /* 表格背景色 */
font-size:14px;
}
.datalist caption{
padding-bottom:5px;
font:bold 1.4em;
text-align:left;
}
.datalist th{
border:1px solid #0058a3; /* 行名称边框 */
background-color:#4bacff; /* 行名称背景色 */
color:#FFFFFF; /* 行名称颜色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #0058a3; /* 单元格边框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
background-color:#c4e4ff; /* 动态变色 */
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="0" cellspacing="0" class="datalist">
<tr>
<td height="18" align="right" width="72"><a href="{@linkurl}" target="_blank">{@KS_ABC(Text,0,...,0,)}</a></td>
<td align="right" width="72">{@KS_01(Text,0,...,0,)}</td>
<td align="right" width="72">{@KS_04(Num,0,2)}</td>
<td align="right" width="72">{@KS_A01(Text,0,...,0,)}</td>
<td align="right" width="72">{@KS_A001(Text,0,...,0,)}</td>
</tr>
</table>
<script language="javascript">
var rows = document.getElementsByTagName('tr');
for (var i=0;i<rows.length;i++){
rows[i].onmouseover = function(){ //鼠标在行上面的时候
this.className += 'altrow';
}
rows[i].onmouseout = function(){ //鼠标离开时
this.className = this.className.replace('altrow','');
}
}
</script>
</body>
</html>
[/loop]

做新职业技能培训平台就选#科汛网校

反对(0)

回到顶部

回到底部

底部

春上秋下当前离线

521 主题	9 广播	20 粉丝

添加关注

级别:五年级

用户积分:5627 分
登录次数:635 次
注册时间:2010/6/1
最后登录:2024/6/24

当前不在线

春上秋下发表于：2015/2/26 21:00:12 | 只看该作者查看该作者主题报纸

有生源找课程就上科汛课堂街!

其实，你这个复杂多了，正常是不用需要用JS控制的，直接用 CSS就成了，这样执行效率会更高一些~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
ul { width: 300px; height: auto; }
li { font-size: 14px; line-height: 28px; }
li:hover { background-color: #BFEFFF; }
span { float: right; }
-->
</style>
</head>
<body>
<ul>
<li><span>2015-02-25</span>文字</li>
<li><span>2015-02-25</span>文字</li>
<li><span>2015-02-25</span>文字</li>
<li><span>2015-02-25</span>文字</li>
<li><span>2015-02-25</span>文字</li>
</ul>
</body>
</html>

你试一下吧

科汛商学院助您快速入门

反对(0)

回到顶部

回到底部

底部

＜上一主题 | 下一主题＞

<< 返回列表

Powered By KesionCMS Version X1

厦门科汛软件有限公司 © 2006-2016 页面执行0.15625秒 powered by KesionCMS 9.0