`

鼠标划过table tr的背景样式变更

    博客分类:
  • html
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>鼠标划过table tr的背景样式变更</title>
</head>
<script type="text/javascript">
 function fmove(event){  
     var tr=event.target.parentNode; 
     var table = tr.parentNode;
     if(table.children[0] != tr) {
      var array = tr.children;
     for ( var i = 0; i < array.length; i++) {
      var td = array[i];
      td.style.backgroundColor="#fef7f0";
     }
     }
  
    
   }  
   function fout(event){  
      var tr=event.target.parentNode;  
     
      var array = tr.children;
   for ( var i = 0; i < array.length; i++) {
    var td = array[i];
    td.style.backgroundColor="white";
   }
  }  

</script>
<body>

 


<table width="972" border="0" cellpadding="0"" cellspacing="0" onmousemove="fmove(event)"   onmouseout="fout(event)">  

       <tr>
      <th class="bk" width="85" height="26" scope="col"><div id="u69">
                          <div id="u69_rtf">
                            <p>序号</p>
                          </div>
         </div></th>
      <th width="140" scope="col">标题1</th>
      <th width="127" scope="col">标题2</th>
      <th width="130" scope="col">标题3</th>
         <th width="100" scope="col">标题4</th>
         <th width="132" scope="col">标题5</th>
       </tr>
       <tr>
      <td height="42" align="center" >1</td>
      <td align="center" >xxx</td>
      <td align="center" >xxxx</td>
      <td align="center" >xxxx</td>
         <td align="center" >&nbsp;</td>
         <td align="center" >2012-1-12</td>
       </tr>
        <tr>
      <td height="42" align="center" >2</td>
      <td align="center" >xxx</td>
      <td align="center" >xxxx</td>
      <td align="center" >xxxx</td>
         <td align="center" >&nbsp;</td>
         <td align="center" >2012-1-12</td>
          </tr>
       <tr>
      <td height="42" align="center" >2</td>
      <td align="center" >xxxx</td>
      <td align="center" >xxxx</td>
      <td align="center" >xxx</td>
         <td align="center" >&nbsp;</td>
         <td align="center" >2012-1-12</td>
          </tr>
</table>

</body>
</html>

分享到:
评论

相关推荐

    table鼠标经过时整行变色 jquery

    在网页设计中,表格(Table)是一种常见的数据展示方式,jQuery 是一个强大的JavaScript库,它极大地简化了DOM操作、事件处理以及动画效果。当我们想要在用户鼠标悬停(mouseover)到表格某一行时,实现整行颜色变化...

    鼠标经过网页背景样式改变,jquery效果

    "鼠标经过网页背景样式改变,jQuery效果"是一个典型的交互设计案例,它通过JavaScript库jQuery实现,当用户将鼠标悬停在特定元素上时,网页背景或者元素自身会发生视觉上的变化。这种效果能够吸引用户的注意力,使...

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

    在这个特定的场景中,我们讨论的是如何利用JavaScript来实现鼠标经过时改变HTML表格(table)的行列背景颜色,为用户提供更为直观的视觉反馈。下面将详细介绍这个过程。 首先,我们需要一个基本的HTML表格结构。...

    table嵌套table边框样式

    在网页设计中,表格(Table)是用于组织数据的重要元素,而当表格嵌套时,如何设置合适的边框样式就显得尤为重要。`table嵌套table的边框样式`是一个常见的需求,尤其在处理复杂的数据展示时。本篇将详细介绍如何...

    漂亮的table表格样式

    综上所述,创建“漂亮的table表格样式”涉及多个CSS属性的运用,包括颜色、边框、背景、悬停效果以及过渡动画。通过合理组合这些元素,我们可以制作出既美观又实用的HTML表格,提升网页的整体视觉体验。

    好看table样式 好看的CSS——Table样式表

    网络上收集的css table样式 好看table样式 好看的CSS——Table样式表

    几种实用table样式

    根据给定文件的信息,本文将详细介绍几种实用的表格(table)样式,并且深入解析每种样式的具体实现方法。这几种样式包括纯CSS样式、图片背景的CSS样式、颜色变化的CSS样式以及需要JavaScript支持的表格样式。 ### ...

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

    在CSS(层叠样式表)中,背景色是设置元素背景颜色的一种基本属性,它可以用于任何HTML或XML文档,包括HTML表格(table)。表格样式在网页设计中扮演着重要角色,尤其是在展示数据时。本篇将详细介绍CSS背景色的用法...

    改变table中行的背景

    当鼠标悬停在任何`&lt;tr&gt;`上时,`onMouseOver`事件被触发,使得行的背景颜色变为蓝色。一旦鼠标移开,`onMouseOut`事件被触发,行的背景颜色恢复为白色。这种交互式的视觉变化有助于用户更好地理解页面布局,并增强...

    漂亮的table样式(内附css)

    7. **悬停效果**:使用`:hover`伪类可以为鼠标悬停在表格行或单元格上时添加样式,如`tr:hover { background-color: #f0f0f0; }`。 8. **条纹效果**:通过选择器的奇偶性,可以创建类似Excel的条纹效果,如`tr:nth-...

    table样式.zip

    5. **条纹效果**:通过交替设置不同背景色,可以实现类似斑马纹的条纹效果,例如:`.table tr:nth-child(even) { background-color: #f2f2f2; }` 6. **单元格合并**:使用`colspan`和`rowspan`属性可以合并单元格,...

    改变选择table行的背景色

    ### 改变选择table行的背景色 在网页开发中,为了提高用户体验并增强界面的交互性,我们经常需要对用户的行为做出响应。一个常见的需求是当用户选中表格(`table`)中的某一行时,能够改变该行的背景颜色。这种方式...

    鼠标经过tr时,改变tr当前背景颜色

    在网页设计中,有时我们需要为用户提供更直观的交互体验,比如当用户将鼠标悬停在表格的某一行(`&lt;tr&gt;`元素)上时,改变这一行的背景颜色以突出显示。这个效果可以通过JavaScript和HTML结合实现。在给定的标题和描述...

    JS自定义的漂漂亮样式的Table

    一个简单的表格由`&lt;table&gt;`元素开始,内部包含`&lt;tr&gt;`(表格行)元素,`&lt;tr&gt;`中嵌套`&lt;th&gt;`(表头)或`&lt;td&gt;`(表格数据)元素。例如: ```html &lt;table&gt; &lt;tr&gt; 列1 列2 &lt;/tr&gt; &lt;tr&gt; 数据1 数据2 &lt;/tr&gt; &lt;/table&gt; ...

    隔行换色和鼠标经过样式和title提示效果代码

    在网页设计中,隔行换色、鼠标经过样式和title提示效果是常见的增强用户体验的技巧。这些技术可以提升用户在浏览表格或者列表时的可读性和互动性。下面将详细阐述这些知识点,并给出相应的实现方法。 一、隔行换色 ...

    html,table常用样式

    根据给定的信息,本文将详细解释两种HTML表格的样式:单像素边框CSS表格与带背景图的CSS样式表格,并简要介绍一种自动换整行颜色的CSS样式表格(需要用到JavaScript)。 ### 一、单像素边框CSS表格 #### 1.1 CSS...

    html中table的表格样式

    首先,一个基本的表格由多个部分组成,如`&lt;table&gt;`, `&lt;tr&gt;`, `&lt;th&gt;`, `&lt;td&gt;`等。`&lt;table&gt;`定义了整个表格,`&lt;tr&gt;`表示表格行,`&lt;th&gt;`是表头单元格,而`&lt;td&gt;`则是数据单元格。例如: ```html &lt;table&gt; &lt;tr&gt; 姓名 ...

    js控制table的tr变色

    本文将详细介绍如何利用 JavaScript 来实现鼠标悬停时表格行 (`tr`) 背景颜色变化的效果,并获取表格单元格 (`td`) 的值。 #### 1. 知识点概述 本文主要涉及以下知识点: - 使用 `event` 对象获取当前触发事件的...

    bootstrap集成table样式的总结

    本篇文章将深入探讨如何在Bootstrap中集成和使用Table样式。 一、基础样式 Bootstrap的表格默认具有简洁的样式,包括水平对齐的单元格、行高亮以及可选的striped(斑马纹)和bordered(带边框)样式。通过添加`...

    jq 隐藏table中的tr或td

    本篇文章将详细讲解如何在不预先知道table ID的情况下,使用jQuery来隐藏table中的tr或td元素,以及涉及到的相关知识点。 首先,让我们了解HTML的table结构。一个基本的HTML表格由`&lt;table&gt;`标签开始,内部包含`&lt;tr&gt;...

Global site tag (gtag.js) - Google Analytics