<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>
分享到:
相关推荐
要实现选中行改变颜色的效果,我们需要监听表格的`on('row')`事件,这个事件会在用户点击表格行时触发。当事件触发时,我们可以获取到当前选中的行数据,并根据需要修改行的样式。 ```javascript layui.use(['table...
在这个主题中,我们将深入探讨`a`标签的四种伪类以及表格(table)的使用,同时也会涉及到百分比在CSS布局中的应用。 首先,让我们来了解`a`标签的四种主要伪类: 1. `a:link` - 这个伪类用于选择未被访问的链接,...
在前端开发中,JavaScript是一种非常重要的开发语言,用于实现页面的动态交互效果。在这个特定的场景中,...同时,你还可以扩展此功能,实现更多复杂的交互效果,比如高亮选定的行或列,或者根据数据状态改变颜色等。
在Layui table组件中,若想通过程序动态改变某一行的字体颜色,需要利用JavaScript获取对应行的DOM元素,并修改其样式属性。具体操作方法如下: 1. 首先,我们需要为目标行设置一个特定的标识,以便于通过...
本示例中,我们关注的是"jQuery Table点击选中表格行变色代码",这是一个用于实现用户交互功能的常见需求,即当用户点击表格的某一行时,该行会高亮显示,以突出显示用户的当前选择。 首先,我们要理解jQuery的基本...
`TabLayout`是Android设计支持库中的一个组件,它提供了一个用于展示标签页的界面,用户可以通过点击不同的标签在不同的内容间进行切换。`TabLayout`通常与`ViewPager`一起使用,`ViewPager`则负责管理多个`Fragment...
在这个"table标签做的静态网页"案例中,我们主要探讨如何利用`<table>` 标签进行网页布局,以及如何结合其他技术如CSS(层叠样式表)来实现红色导航和图片滚动效果。 1. **HTML `<table>` 标签的使用**: - `...
`data-classes`默认为`table table-hover`,提供边框和悬停时的背景颜色变化。`sortClass`可以自定义排序时单元格的CSS类,`height`设置表格的高度,`text`处理未定义内容时的默认显示,`striped`则控制是否显示斑马...
表格的样式也可以通过CSS来进一步定制,例如改变边框样式、背景颜色、文字颜色等。CSS提供了更精细的控制,使得表格的设计更加灵活和美观。 综上所述,掌握HTML表格的使用是网页设计的基础。通过熟练运用各种属性和...
以下是 `<table>` 标签的一些关键属性及其详细解释: 1. **border**: 这个属性用于设置表格的边框宽度。默认情况下,`border="0"` 表示无边框。你可以指定一个像素值,如 `border="1"` 来显示边框。例如: ```html...
使用`background-color`属性可以改变元素的背景颜色。例如,如果你想让一个段落的背景色为红色,你可以这样写: ```css p { background-color: red; } ``` 颜色值可以是预定义的颜色名(如`red`)、十六进制表示...
虽然示例未提及CSS,但在实际应用中,我们通常会使用CSS来美化表格,如改变颜色、调整字体样式、添加背景图片等。通过为表格元素设置类或ID,可以实现更精确的样式控制。 六、响应式设计 现代网页设计强调响应式...
2. **样式控制**:CSS提供了丰富的样式控制手段,如边距、填充、颜色、字体等,使我们能够精确地调整每个单元格或行的样式,而`<table>`的样式通常受限。 3. **语义化**:`<ul>`和`<li>`元素在HTML中具有明确的语义...
在IT领域,滚动条是用户界面(UI)设计中不可或缺的一部分,特别是在表格(TABLE)元素中,当数据过多无法在单个屏幕内显示时,滚动条提供了浏览整个内容的手段。"TABLE滚动条"这个主题涉及到网页开发中的HTML、CSS...
这段代码展示了基本的表格样式,包括合并边框、设置行间隔、改变奇偶行颜色、表头颜色以及鼠标悬停效果。 通过以上这些知识点,我们可以灵活地控制HTML表格的外观和交互效果,使其在视觉上更具吸引力,同时保持...
3. 定位与布局:使用`position`属性(如`relative`、`absolute`或`fixed`)和`z-index`来控制tab和内容区域的相对位置,确保点击tab时正确显示对应内容。 4. 激活状态:通过添加类名(如`.active`)并设置相应的CSS...
当点击某一行时,将这一行设置为被选中的状态,并改变其背景颜色;如果再次点击已选中的行,则取消选择。 #### 2. `check` 函数解析 该函数用于获取当前被选中行的第一个单元格中的值,并将其显示在页面上。如果...
一个基本的Bootstrap表格由`<table>`标签开始,`<thead>`包含表头部分,`<tbody>`则用于放置表格主体数据。例如: ```html <table class="table"> 列1 列2 列3 数据1 数据2 数据3 <!-- 更多行...
CSS(层叠样式表)可以用来进一步定制表格的外观,如改变字体、颜色、背景等。 总的来说,"html_table_generator.zip"提供的工具简化了HTML表格的创建,使非编程背景的用户也能轻松地设计美观且功能齐全的HTML表格...
- 例如,可以使用`border-collapse`属性合并单元格间的边框,`text-align`控制文字对齐,`background-color`改变背景色。 3. **JavaScript操作** - `table_order.js`可能包含了动态操作表格数据的JavaScript代码...