`
八岭书生
  • 浏览: 104091 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

a标签点击改变颜色,同时table里面内容颜色改变

阅读更多
<script type="text/javascript">
  	function changeColor(table, color, background, wordcolor){
		var t=document.getElementById(table).getElementsByTagName("td");
		for(var i=0;i<t.length;i++){
			t[i].style.backgroundColor=color;
			t[i].onmouseover=function(){
				if(this.x!="1") {
					this.style.backgroundColor=background;
					this.style.color= wordcolor;
				}
			}
			t[i].onmouseout=function(){
				if(this.x!="1") {
					this.style.backgroundColor=color;
					this.style.color= "#000000";
				}
			}
		}
  	}
  </script>
  <style type="text/css">
  	body{width:100%; font:13px "宋体", Arial, Helvetica, sans-serif; color:#333;}
  	.areaList{
		border:1px #000 solid;
		border-left:none;
		border-bottom:none;
	}
	.areaList td{
		border-left:1px #000 solid;
		border-bottom:1px #000 solid;
		height:35px;
		text-align:center;
	}
	a {text-decoration: none;color: #000000;}
	a:HOVER {color: #A91709;}
  </style>

 

<div style="background-color:#FFFFFF;">
<h2><center>省级骨干横向</center></h2>
    <div>
      <table class="areaList" id="areaList" border="0" cellspacing="0" cellpadding="0" width="800px" align="center">
		<tbody>
			<td>地址</td>
			<td>名称</td>
		</tbody>
		<tr>
			<td>172.168.0.1</td>
			<td><a href="performanceMonitor.do?action=more" target="_blank" target="_blank">路由器</a></td>
		</tr>
</table>
    </div>
</div>
<script type="text/javascript">
  	 changeColor("areaList", "#FFF", "#9CCFFF", "#A91709");
  </script>
 

 

分享到:
评论

相关推荐

    layui的表格table选中数据后更改本行的颜色

    要实现选中行改变颜色的效果,我们需要监听表格的`on('row')`事件,这个事件会在用户点击表格行时触发。当事件触发时,我们可以获取到当前选中的行数据,并根据需要修改行的样式。 ```javascript layui.use(['table...

    a标签的四种伪类和table和百分比.xmind

    在这个主题中,我们将深入探讨`a`标签的四种伪类以及表格(table)的使用,同时也会涉及到百分比在CSS布局中的应用。 首先,让我们来了解`a`标签的四种主要伪类: 1. `a:link` - 这个伪类用于选择未被访问的链接,...

    鼠标经过改变table行列背景颜色

    在前端开发中,JavaScript是一种非常重要的开发语言,用于实现页面的动态交互效果。在这个特定的场景中,...同时,你还可以扩展此功能,实现更多复杂的交互效果,比如高亮选定的行或列,或者根据数据状态改变颜色等。

    jQuery Table点击选中表格行变色代码.zip

    本示例中,我们关注的是"jQuery Table点击选中表格行变色代码",这是一个用于实现用户交互功能的常见需求,即当用户点击表格的某一行时,该行会高亮显示,以突出显示用户的当前选择。 首先,我们要理解jQuery的基本...

    table标签做的静态网页

    在这个"table标签做的静态网页"案例中,我们主要探讨如何利用`&lt;table&gt;` 标签进行网页布局,以及如何结合其他技术如CSS(层叠样式表)来实现红色导航和图片滚动效果。 1. **HTML `&lt;table&gt;` 标签的使用**: - `...

    TableActivity 实现TableActivity之间的不同Tab标签的切换

    `TabLayout`是Android设计支持库中的一个组件,它提供了一个用于展示标签页的界面,用户可以通过点击不同的标签在不同的内容间进行切换。`TabLayout`通常与`ViewPager`一起使用,`ViewPager`则负责管理多个`Fragment...

    layui table设置某一行的字体颜色方法

    在Layui table组件中,若想通过程序动态改变某一行的字体颜色,需要利用JavaScript获取对应行的DOM元素,并修改其样式属性。具体操作方法如下: 1. 首先,我们需要为目标行设置一个特定的标识,以便于通过...

    Bootstrap Table API 中文版(完整翻译文档)

    `data-classes`默认为`table table-hover`,提供边框和悬停时的背景颜色变化。`sortClass`可以自定义排序时单元格的CSS类,`height`设置表格的高度,`text`处理未定义内容时的默认显示,`striped`则控制是否显示斑马...

    table 的用法 网页设计 中html 语言中table用法

    表格的样式也可以通过CSS来进一步定制,例如改变边框样式、背景颜色、文字颜色等。CSS提供了更精细的控制,使得表格的设计更加灵活和美观。 综上所述,掌握HTML表格的使用是网页设计的基础。通过熟练运用各种属性和...

    使用HTML开发商业网站-table标签属性课件.pptx

    以下是 `&lt;table&gt;` 标签的一些关键属性及其详细解释: 1. **border**: 这个属性用于设置表格的边框宽度。默认情况下,`border="0"` 表示无边框。你可以指定一个像素值,如 `border="1"` 来显示边框。例如: ```html...

    css背景色和table样式,一些参考

    使用`background-color`属性可以改变元素的背景颜色。例如,如果你想让一个段落的背景色为红色,你可以这样写: ```css p { background-color: red; } ``` 颜色值可以是预定义的颜色名(如`red`)、十六进制表示...

    HTML用table写的一个网页,纯table源码

    虽然示例未提及CSS,但在实际应用中,我们通常会使用CSS来美化表格,如改变颜色、调整字体样式、添加背景图片等。通过为表格元素设置类或ID,可以实现更精确的样式控制。 六、响应式设计 现代网页设计强调响应式...

    css用ul取代table

    2. **样式控制**:CSS提供了丰富的样式控制手段,如边距、填充、颜色、字体等,使我们能够精确地调整每个单元格或行的样式,而`&lt;table&gt;`的样式通常受限。 3. **语义化**:`&lt;ul&gt;`和`&lt;li&gt;`元素在HTML中具有明确的语义...

    TABLE滚动条

    在IT领域,滚动条是用户界面(UI)设计中不可或缺的一部分,特别是在表格(TABLE)元素中,当数据过多无法在单个屏幕内显示时,滚动条提供了浏览整个内容的手段。"TABLE滚动条"这个主题涉及到网页开发中的HTML、CSS...

    CSS.table.rar_Table_css table_table css_表格css

    这段代码展示了基本的表格样式,包括合并边框、设置行间隔、改变奇偶行颜色、表头颜色以及鼠标悬停效果。 通过以上这些知识点,我们可以灵活地控制HTML表格的外观和交互效果,使其在视觉上更具吸引力,同时保持...

    table与tab页css样式与demo.zip

    3. 定位与布局:使用`position`属性(如`relative`、`absolute`或`fixed`)和`z-index`来控制tab和内容区域的相对位置,确保点击tab时正确显示对应内容。 4. 激活状态:通过添加类名(如`.active`)并设置相应的CSS...

    table_boostrap

    一个基本的Bootstrap表格由`&lt;table&gt;`标签开始,`&lt;thead&gt;`包含表头部分,`&lt;tbody&gt;`则用于放置表格主体数据。例如: ```html &lt;table class="table"&gt; 列1 列2 列3 数据1 数据2 数据3 &lt;!-- 更多行...

    html_table_generator.zip_Table_Table Generat_table generator_生成H

    CSS(层叠样式表)可以用来进一步定制表格的外观,如改变字体、颜色、背景等。 总的来说,"html_table_generator.zip"提供的工具简化了HTML表格的创建,使非编程背景的用户也能轻松地设计美观且功能齐全的HTML表格...

    HTML_TABLE_数据填充处理.

    - 例如,可以使用`border-collapse`属性合并单元格间的边框,`text-align`控制文字对齐,`background-color`改变背景色。 3. **JavaScript操作** - `table_order.js`可能包含了动态操作表格数据的JavaScript代码...

    jQuery实现table表格鼠标经过隔行换颜色特效代码.zip

    同时,我们可以结合`.even()`和`.odd()`选择器来选择偶数行和奇数行,然后改变它们的背景色。以下是一个简单的示例: ```javascript $(document).ready(function() { $("table tr").hover( function() { // 鼠标...

Global site tag (gtag.js) - Google Analytics