实现table鼠标移动改变table行背景色

最新推荐文章于 2024-09-05 11:49:00 发布
最新推荐文章于 2024-09-05 11:49:00 发布
阅读量119 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/jlydboy/articles/1442194.html
版权
ContractedBlock.gif ExpandedBlockStart.gif Code
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>css-Table布局中单元格background-color鼠标响应的JS代码</title>

<script language="javascript">



var aTDClick=new Array(3);

function onColor(td,n)

{

if(!aTDClick[n-1]){

td.style.backgroundColor='#FFFF99';

td.style.color='#0600FF';

}else{

td.style.backgroundColor='#FF6699';

td.style.color='#0600FF';

}

}



function onClickColor(td,n)

{

switch(n)

{

case 1:

if(aTDClick[0]!==true){

td.style.backgroundColor='#FF6699';

td.style.color='#0600FF';

aTDClick[0]=true;

}else{

TR1.style.backgroundColor='';

TR1.style.color='';

aTDClick[0]=false;

}

TR2.style.backgroundColor='';

TR2.style.color='';

TR3.style.backgroundColor='';

TR3.style.color='';

aTDClick[1]=false;

aTDClick[2]=false;

break;

case 2:

if(aTDClick[1]!==true){

td.style.backgroundColor='#FF6699';

td.style.color='#0600FF';

aTDClick[1]=true;

}else{

TR2.style.backgroundColor='';

TR2.style.color='';

aTDClick[1]=false;

}

TR1.style.backgroundColor='';

TR1.style.color='';

TR3.style.backgroundColor='';

TR3.style.color='';

aTDClick[0]=false;

aTDClick[2]=false;

break;

case 3:

if(aTDClick[2]!==true){

td.style.backgroundColor='#FF6699';

td.style.color='#0600FF';

aTDClick[2]=true;

}else{

TR3.style.backgroundColor='';

TR3.style.color='';

aTDClick[2]=false;

}

TR2.style.backgroundColor='';

TR2.style.color='';

TR1.style.backgroundColor='';

TR1.style.color='';

aTDClick[1]=false;

aTDClick[0]=false;

break;

}

}



function offColor(td,n)

{

if(!aTDClick[n-1]){

td.style.backgroundColor='';

td.style.color='';

}else{

td.style.backgroundColor='#FF6699';

td.style.color='#0600FF';

}

}





</script>

<style type="text/css">



.light {

font: normal 9pt "宋体";

color: #000000;

text-decoration: none;

background: #FFFFFF;

cursor: default;

}

.tdstyle {

border: 1px dashed #0099CC;

}



</style>

</head>



<body>

<table width="100%" border="0" cellspacing="4" cellpadding="0">

<tr id="TR1" class="light" onMouseOver="onColor(this,1);" onMouseOut="offColor(this,1);" onClick="onClickColor(this,1);">

<td class="tdstyle" height="25">第一行</td>
<td class="tdstyle" height="25">第三行</td>
</tr>

<tr 16:15 2009-4-23>

<td class="tdstyle" height="25">第二行</td>
<td class="tdstyle" height="25">第三行</td>
</tr>

<tr id="TR3" class="light" onMouseOver="onColor(this,3);" onMouseOut="offColor(this,3);" onClick="onClickColor(this,3);">

<td height="25">第三行</td>
<td  height="25">第三行</td>
</tr>
<tr  class="light" onMouseOver="onColor(this,3);" onMouseOut="offColor(this,3);" onClick="onClickColor(this,3);">

<td height="25">第三行</td>
<td  height="25">第三行</td>
</tr>
</table>



</body>

</html>

转载于:https://www.cnblogs.com/jlydboy/articles/1442194.html

weixin_30500289
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 - Arco Design Vue 表格组件 table 隐藏鼠标移入时 hover 高亮背景色，el-table 组件去除鼠标悬停在表格行的 hover 高亮效果（改变鼠标移入时的背景色）
王佳斌
06-30 2363
vue3，arco design vue，arco design，表格，a-table，hover，表格hover的class类名是什么，class，hover，在arco design vue项目中，表格组件如何去掉鼠标移入时的hover效果，vue3 arco.design 表格组件修改鼠标移入行的背景颜色，table表格，取消表格行row移入高亮效果，去掉鼠标移入行时的hover效果，取消a-table的hover状态，取消高亮显示，隐藏表格鼠标hover效果，去除鼠标触摸变色效果，如何取消arco表
html设置鼠标移动变色,table行随鼠标移动变色示例
weixin_42308335的博客
06-04 2042
1、设计表格工号姓名年龄性别2014010101张峰56男2014010102李玉42女2014010103王珂36男2014010104张钰31女2014010105朱顾44男2014010106胡雨35女2014010107刘希30男2014010108孙宇45女2014010109谷雨33男2014010110科宇45女2、设计样式.html_body .body_div{width: 13...
改变选择table行的背景色
07-16
当你选中table中的某一行时，想改变这一行的背景色就可以测试此方法
鼠标经过时，改变表格背景颜色
fuchangle2919的博客
11-02 230
[img]http://dl.iteye.com/upload/attachment/0076/0070/e83a8077-7cde-3db8-ba1a-9f62460972a5.png[/img] [code="html"] 鼠标经过时，改变表格背景颜色 1 2 3 4 5 [...
鼠标经过时 表格行的背景色更改
weixin_30617695的博客
05-26 273
<html><head><style type="text/css">#customers { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; }#customers td, #customers th { ...
实现表格隔行换色，鼠标经过每一行时，高亮显示，离开时恢复的另一种方法
天空守护云
01-24 674
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; table{width
鼠标移动改变table行的背景颜色
cxws110的博客
03-25 1720
<table id="fk" class="table-grid"> <c:forEach items="${hkList}" var="hk"> <tr onmouseover="over('${hk.hkid}')"> <td style="disp...
鼠标移动改变所在行背景色。
angel900的博客
03-16 366
<script type="text/javascript"> window.onload = function(){ // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 var y=document.getElementsByTagName("tr"); for (i=0;i<y.length;i++){ if(y[i].c..
鼠标滑过table时修改表格行的背景颜色
weixin_30929195的博客
04-17 1677
方法一： #customers tr:hover { background-color: #f00; } 方法二： <tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'"> <td>Appl...
table行随鼠标移动变色示例
09-04
本文将详细介绍如何实现一个“table行随鼠标移动变色”的功能，帮助开发者创建更具视觉辨识度的数据展示表格。 首先，我们来看一下基本的HTML结构。在给出的示例中，一个简单的表格（`<table>`）被创建，包含了表头...
table表格hover时改变背景色
04-16
简单的moseover实现td背景色改变
写得不错的jquery table鼠标经过变色代码
10-26
在本文中，我们将详细介绍如何利用jQuery实现鼠标经过表格（table）时使行（tr）变色的效果。这一效果在网页设计中相当常见，能够帮助用户更直观地看到鼠标所在的行，增强交互体验。 ### 知识点一：jQuery选择器的...
易语言高级表格鼠标移动时改变背景色.7z
05-16
本资源“易语言高级表格鼠标移动时改变背景色.7z”提供了一个实现这一功能的示例，即当鼠标在表格上移动时，相应单元格的背景颜色会动态变化，以突出显示当前光标所在位置。这种效果常见于数据浏览和编辑界面，能够...
鼠标经过、移出改变表格颜色
faunjoe的专栏
06-15 576
 通过onMouseOver（鼠标经过）、onMouseOut（鼠标移去）事件来控件当前行的样式，即this.style.backgroundColor来实现表格行的颜色改变。对于C# web控件，如DataGrid，可通过其特性Attributes来实现。控件名.Attributes.Add("onMouseOver","this.style.backgroundColor=#FFCC
vue 实现表格间隔颜色样式+鼠标上移样式+出入场动画
qq_42477147的博客
08-21 957
完整代码： <template> <div class="hello"> <label> ID: <input type="text" v-model="id" /> </label> <label> NAME: <input type="tex...
CSS:当鼠标移动到表格的某一行时改变其背景颜色
weixin_34018169的博客
03-10 833
效果： 鼠标没有指向任何一行时：   当鼠标指向其中一行时： 代码: html: View Code &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html...
当鼠标移到单元格(tr、td)背景变色 多种解决方案
热门推荐
zhouzilong502086525的专栏
03-23 1万+
第一种：td单元格变色，只用简单的js代码即可实现。很简洁的代码，点击即可运行该代码<br /><body><br /><table border="1px"><br /> <tr><br />  <th id="id_item1" onmouseover="this.bgColor='green'" onmouseout="this.bgColor=''">Menu Item1</th><br /> </tr><br /> <tr><br />  <th>Menu Item2</th><br /> </t
实现表格隔行换色，鼠标经过每一行时，高亮显示，离开时恢复。
天空守护云
01-24 633
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; table{width
第二百一十六节 JSF教程 - JSF基本标签、JSF表单文本框示例
最新发布
2301_78772942的博客
09-05 484
第二百一十六节 JSF教程 - JSF基本标签、JSF表单文本框示例
HTML表格：鼠标悬停行动态变色效果实现
在本示例中，可能是为`<tr>`元素定义了`:hover`样式，比如改变背景色和文字颜色，这样当鼠标移动到表格的任何一行时，行的背景色会变亮或者变为另一种颜色，以便用户更容易地识别所选中的行。 例如，未显示的CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值