zoukankan      html  css  js  c++  java
  • Highlight Table Row

    http://www.codeave.com/javascript/code.asp?u_log=7070

    Outside of the web, bookmarks were useful for many more things than just keeping a spot in a book. One thing you could use them for was to scan down lines of text to match up items across a page. Some rather large html tables have the failing that by the time you look or scroll to the right you’ve forgotten what item on the horizontal you were looking at. In an effort to remedy this you can utilize a couple of simple JavaScript commands in your table to highlight a specific row, so there is no mistaken what information belongs where. In this example we utilize the career statistics of Hank Greenberg. When you mouse pointer hovers over any portion of the table that row (or year) background color will change from white to gray. Once off that row or the table entirely the row will return to white.


    <html>
    <title>CodeAve.com(Hightlight Row IE)</title>
    <body bgcolor="#FFFFFF">
    <table border=1 align=center>
    <caption>Hank Greenberg Career Statistics</caption>
    <th>Year</th>
    <th>Team</th>
    <th>AVG</th>
    <th>AB</th>
    <th>R</th>
    <th>H</th>
    <th>Double</th>
    <th>Triple</th>
    <th>HR</th>
    <th>RBI</th>
    <th>BB</th>
    <th>SO</th>
    <th>SB</th>
    <tr onMouseOver="this.bgColor = '#C0C0C0'" onMouseOut ="this.bgColor = '#FFFFFF'" bgcolor="#FFFFFF"> 
    <td align=right>1938</td>
    <td align=right>Detroit</td>
    <td align=right>.315</td>
    <td align=right>556</td>
    <td align=right>144</td>
    <td align=right>175</td>
    <td align=right>23</td>
    <td align=right>4</td>
    <td align=right>58</td>
    <td align=right>146</td>
    <td align=right>119</td>
    <td align=right>92</td>
    <td align=right>7</td>
    </tr>
    <tr onMouseOver="this.bgColor = '#C0C0C0'" onMouseOut ="this.bgColor = '#FFFFFF'" bgcolor="#FFFFFF"> 
    <td align=right>1939</td>
    <td align=right>Detroit</td>
    <td align=right>.312</td>
    <td align=right>500</td>
    <td align=right>112</td>
    <td align=right>156</td>
    <td align=right>42</td>
    <td align=right>7</td>
    <td align=right>33</td>
    <td align=right>112</td>
    <td align=right>91</td>
    <td align=right>95</td>
    <td align=right>8</td>
    </tr>
    <tr onMouseOver="this.bgColor = '#C0C0C0'" onMouseOut ="this.bgColor = '#FFFFFF'" bgcolor="#FFFFFF"> 
    <td align=right>1940</td>
    <td align=right>Detroit</td>
    <td align=right>.340</td>
    <td align=right>573</td>
    <td align=right>129</td>
    <td align=right>195</td>
    <td align=right>50</td>
    <td align=right>8</td>
    <td align=right>41</td>
    <td align=right>150</td>
    <td align=right>93</td>
    <td align=right>75</td>
    <td align=right>6</td>
    </tr>
    <tr onMouseOver="this.bgColor = '#C0C0C0'" onMouseOut ="this.bgColor = '#FFFFFF'" bgcolor="#FFFFFF"> 
    <td align=right>1941</td>
    <td align=right>Detroit</td>
    <td align=right>.269</td>
    <td align=right>67</td>
    <td align=right>12</td>
    <td align=right>18</td>
    <td align=right>5</td>
    <td align=right>1</td>
    <td align=right>2</td>
    <td align=right>12</td>
    <td align=right>16</td>
    <td align=right>12</td>
    <td align=right>1</td>
    </tr>
    <tr onMouseOver="this.bgColor = '#C0C0C0'" onMouseOut ="this.bgColor = '#FFFFFF'" bgcolor="#FFFFFF"> 
    <td align=right>1942</td>
    <td align=right>Detroit*</td>
    <td align=right>0</td>
    <td align=right>0</td>
    <td align=right>0</td>
    <td align=right>0</td>
    <td align=right>0</td>
    <td align=right>0</td>
    <td align=right>0</td>
    <td align=right>0</td>
    <td align=right>0</td>
    <td align=right>0</td>
    <td align=right>0</td>
    </tr>
    <tr onMouseOver="this.bgColor = '#C0C0C0'" onMouseOut ="this.bgColor = '#FFFFFF'" bgcolor="#FFFFFF"> 
    <td align=center colspan=2>Total</td>
    <td align=right>.313</td>
    <td align=right>5193</td>
    <td align=right>1051</td>
    <td align=right>1628</td>
    <td align=right>379</td>
    <td align=right>71</td>
    <td align=right>331</td>
    <td align=right>1276</td>
    <td align=right>852</td>
    <td align=right>844</td>
    <td align=right>58</td>
    </tr>
    </table>
  • 相关阅读:
    ActiveSync合作关系对话框的配置
    WINCE对象存储区(object store)
    Wince 隐藏TASKBAR的方法
    Wince输入法换肤换语言机制
    poj 3080 Blue Jeans 解题报告
    codeforces A. Vasily the Bear and Triangle 解题报告
    hdu 1050 Moving Tables 解题报告
    hdu 1113 Word Amalgamation 解题报告
    codeforces A. IQ Test 解题报告
    poj 1007 DNA Sorting 解题报告
  • 原文地址:https://www.cnblogs.com/cy163/p/392205.html
Copyright © 2011-2022 走看看