»
EnglishFrenchVietnamese

Print - Row Rollover - JavaScriptBank.com

Full version: jsB@nk » Form » Table » Row Rollover
URL: https://www.javascriptbank.com/row-rollover.html

Row Rollover © JavaScriptBank.comUse this JavaScript to highlight rows in tables. Short but effective.

Full version: jsB@nk » Form » Table » Row Rollover
URL: https://www.javascriptbank.com/row-rollover.html



CSS
<style type=text/css><!--#demo tr.ruled {  background:#9cf;}--></style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script type="text/javascript">// Created by: Chris Heilmann :: http://www.alistapart.com/articles/tablerulerfunction tableruler() {  if (document.getElementById && document.createTextNode) {    var tables=document.getElementsByTagName('table');    for (var i=0;i<tables.length;i++)    {      if(tables[i].className=='ruler') {        var trs=tables[i].getElementsByTagName('tr');        for(var j=0;j<trs.length;j++)        {          if(trs[j].parentNode.nodeName=='TBODY') {            trs[j].onmouseover=function(){this.className='ruled';return false}            trs[j].onmouseout=function(){this.className='';return false}          }        }      }    }  }}window.onload=function(){tableruler();}// --></script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<table id="demo" class="ruler" border=1 summary="Table of my records" cellpadding="5"><caption>Blues Artists &amp; Songs</caption><thead>  <tr>    <th scope="col">Artist</th>    <th scope="col">Title</th>  </tr></thead><tbody>  <tr>    <td>John Mayall </td>    <td>Double Crossing Time </td>  </tr>  <tr>    <td>Buddy Guy </td>    <td>On A Saturday Night </td>  </tr>  <tr>    <td>John Lee Hooker </td>    <td>Don&#39;t Look Back </td>  </tr>  <tr>    <td>Bo Diddley </td>    <td>You Can&#39;t Judge a Book by Its Cover </td>  </tr>  <tr>    <td>Billie Holiday </td>    <td>Solitude </td>  </tr>  <tr>    <td>Stevie Ray Vaughan </td>    <td>Texas Flood </td>  </tr></tbody></table><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->