js当行变色点击变色鼠标滑过变色

最新推荐文章于 2023-11-09 19:06:18 发布
最新推荐文章于 2023-11-09 19:06:18 发布
阅读量4k 收藏
点赞数
文章标签： border javascript function html 互联网 table

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>隔行变色、响应鼠标滑过行变色、点击行变色丨中国技术教程网</TITLE>
<style type="text/css">
<!--
A{ FONT-SIZE: 14px; COLOR: #CC6666; TEXT-DECORATION: none}
#senfe {
width: 300px;
border-top: #000 1px solid;
border-left: #000 1px solid;
}
#senfe td {
border-right: #000 1px solid;
border-bottom: #000 1px solid;
}
-->
</style>
<script language="javascript"><!--
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].οnclick=function(){
if(this.x!="1"){
this.x="1";//本来打算直接用背景色判断，FF获取到的背景是RGB值，不好判断
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].οnmοuseοver=function(){
if(this.x!="1")this.style.backgroundColor=c;
}
t[i].οnmοuseοut=function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
-->
</script>
</HEAD>
<body bgcolor="#ECF2F4">
<TABLE width="100%" cellPadding="0" cellSpacing="0" border="0" >
<TBODY>
<TR><TD align="center">
<a name="top">&nbsp;</a>
<TABLE width="95%" cellPadding="0" cellSpacing="0" border="0" >
<TR><TD height="40">&nbsp;</TD></TR>
<TR><TD align="center"><h4><b>神奇的隔行变色</b></h4></TD></TR>
<TR><TD height="2" bgcolor="#CC6666"></TD></TR>
<TR><TD height="3" bgcolor="#ECF2F4"></TD></TR>
<TR><TD height="1" bgcolor="#CC6666"></TD></TR>
<TR><TD height="20" bgcolor="#ECF2F4"></TD></TR>
</TABLE></TD></TR>
<TR><TD>
<table align="center" border="0" cellpadding="0" cellspacing="0" id="senfe">
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
</table>
<script language="javascript"><!--
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
senfe("senfe","#fff","#ccc","#cfc","#f00");
--></script>
</TD></TR>
<TR><TD>
<TABLE align="center" bgColor="#ECF2F4"  width="95%" border=0>
<TR><TD height="20" bgcolor="#ECF2F4"></TD></TR>
<TR><TD align="right" bgcolor="#ECF2F4">&nbsp;&nbsp;&nbsp;&nbsp;</TD></TR>
<TR><TD height="10" bgcolor="#ECF2F4"></TD></TR>
<TR><TD height="1" bgcolor="#CC6666"></TD></TR>
<TR><TD height="2" bgcolor="#ECF2F4"></TD></TR>
<TR><TD height="2" bgcolor="#CC6666"></TD></TR>
</TABLE></TD></TR>
</TBODY>
</TABLE>
</body>
</html>
<p align="center">本特效由 <a href="http://www.update8.com">中国技术教程网</a> 收集于互联网，只为兴趣与学习交流，不作商业用途。</p>

臭小子小豆豆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js鼠标经过变色
weixin_58414196的博客
12-21 918
【代码】js鼠标经过变色。
js特效点击会变色哦！
10-05
js特效点击会变色哦！js特效点击会变色哦！js特效点击会变色哦！js特效点击会变色哦！js特效点击会变色哦！
JS小函数实现鼠标单击表格变色
yehui186之中期回顾
10-10 167
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; ..
JS的一些简单应用 —— 点击变色(1次)
烟敛寒林的博客
05-17 908
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;style &amp;gt; div { width: 300px; height: 300px; } #test1 { background: green; } #test2 {
js点击改变颜色
Lyonahah的博客
11-09 1337
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .cd{ width: 200px; height: 20px; border: solid 1px black; text-align: center; float: left;.
js实现鼠标经过表格行变色的方法
10-24
在网页开发中，有时我们需要为用户提供更加友好的交互体验，例如当用户鼠标经过表格行时，改变行的背景颜色以突出显示。这个功能可以通过JavaScript实现，结合HTML表格和CSS样式，以及JavaScript的事件监听机制。...
JavaScript实现鼠标点击导航栏变色特效
10-20
本文给大家分享一段基于js代码实现的鼠标点击导航栏变色效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
这样，表格就会根据配置自动应用隔行变色和鼠标滑过高亮效果。这个插件的灵活性在于，你可以通过传递不同的配置对象来定制样式类，以适应不同的设计需求。 总结来说，这个jQuery插件的核心功能包括： 1. 根据行的...
基于jQuey实现鼠标滑过变色(整行变色)
09-03
标题中的“基于jQuery实现鼠标滑过变色(整行变色)”是指使用JavaScript库jQuery来创建一种交互式网页效果，即当用户将鼠标光标移动到网页中的某个元素（如列表项）上时，该元素及其相关部分会改变颜色，以提供视觉...
jQuery实现鼠标滑过鼠标变色功能
06-10
在本教程中，我们将深入探讨如何利用jQuery实现一个功能：当鼠标滑过表格时，使得行背景色发生变化，即所谓的“鼠标悬停高亮”效果。这个效果可以提升用户体验，帮助用户更清楚地识别和跟踪选中的表格行。 首先，...
js隔行变色、鼠标划过变色代码
01-19
隔行变色且鼠标划过变色的效果 .container ul{margin:0;padding:0;} .container li{cursor:pointer;height:30px;width:200px;background-color:#FFC;line-height:30px;text-indent:1em;font-size:12px;} .container .change{cursor:pointer;height:30px;width:200px;background-color:#C1F9CC;line-height:30px;text-indent:1em;font-siz
js 特效 html 特效 鼠标悬停变颜色
09-03
js 特效 html 特效 鼠标悬停变颜色 js 特效 html 特效 鼠标悬停变颜色
JS实现点击单元格改变所在行颜色（最简代码）
王世洪的博客
03-23 2318
我以前也发布过通过“JS实现点击单元格改变所在行颜色”的博客，不过都是以前初出茅庐的时候写的，代码不够简化。 前段时间发现还有其他方式可以实现该效果，而且只需要一行代码，所以再发布一条，供大家参考使用。 1、最受青睐 功能： ① 点击改变行颜色，无论原本有无背景色； ② 点击其他行则清除背景，恢复背景色和颜色 操作： 添加加载结束事件（其他类型报表也通用）： //使点击的行变色 contentPane.makeHighlight('#FFF4C4','',true); ..
javascript 隔行变色，鼠标滑过变色
weixin_34365417的博客
12-13 123
隔行变色，突出的是 隔行变色哈。奇数行和偶数行不同。 鼠标滑过变色，鼠标离开时要赋回原来的颜色，滑动到哪一行要赋新的颜色，两个事件 和 onmouseover 代码如下： <scripttype="text/javascript">vari=0;document.write("<tablealign='center'&...
JavaScript实现单击行变颜色
唯佳
11-13 959
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">JavaS
JS实现隔行变色及鼠标滑过变色
08-23 183
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景","经过时字色","经过后字色",开始变色的行号);调用：senfe("table1", "#FFF", "#EEE", "#1B3243", "#074387", "#FFF", "#666", 2);function senfe(o, a, b, c, d, e, f, g) { va...
JS点击图片指定对象变色两种方法
最新发布
zlq7777的博客
11-09 588
要求：点击上面的颜色实现下面的图像变成相同的颜色。难点：对于js函数的this对象不太清楚如何传递。
利用js实现鼠标移动到目标行进行颜色调整
a000515的博客
08-26 1144
【代码】利用js实现鼠标移动到目标行进行颜色调整。
html5代码实现单击界面转换,JS实现的按钮点击颜色切换功能示例
weixin_28881749的博客
06-02 876
本文实例讲述了JS实现的按钮点击颜色切换功能。分享给大家供大家参考，具体如下：先来看看运行效果：具体代码如下：www.jb51.net 点击切换按钮颜色按钮1按钮2按钮3//设置背景颜色//如果设置参数函数会节省函数数量吧//设置flag+参数函数flag = "btn1";function btn1(){document.getElementById("btn2").style.color = ...
button鼠标滑过和点击时变色
06-09
要实现button鼠标滑过和点击时变色，可以使用CSS样式来实现。具体实现方法如下： 1. 鼠标滑过时变色： ```css button:hover { background-color: #FFC0CB; /* 设置背景色为粉色 */ } ``` 2. 鼠标点击时变色： ```css button:active { background-color: #FF1493; /* 设置背景色为深粉色 */ } ``` 上述代码中，`:hover` 表示鼠标滑过时的样式，`:active` 表示鼠标点击时的样式。你可以根据需要自定义背景色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值