Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
   <meta http-equiv="X-UA-Compatible" content="IE=8">
      <title>IE8 Table Hover</title>
   <style type="text/css">
      table, tr, td{ border-collapse: collapse; border: 1px solid black; }        
      tr.high td{ background-color: #FF0; }
    </style>
  </head>
  <body>
    <div id="out">~</div>
    <script type="text/javascript">
      
var numRows = 100;
var numCols = 50;
function renderTable() {
    var a = [];
    a.push('<table id="myTable"><tbody>');
    for (var i = 0; i < numRows; i++) {
        a.push('<tr>');
        for (var j = 0; j < numCols; j++) {
            a.push('<td>');
            a.push(i + ':' + j);
            a.push('</td>');
        }
        a.push('</tr>');
    }
    a.push('</tbody></table>');
    var div = document.createElement('div');
    div.innerHTML = a.join('');
    div = document.body.appendChild(div);
    var lastHiglight = null;
    var bigTable = document.getElementById("myTable");
    bigTable.onmouseover = function (e) {
        e = e || window.event;
        var elm = e.target || e.srcElement;
        var tag = elm.nodeName.toLowerCase();
        if (tag == "td") {
            if (lastHiglight) {
                lastHiglight.className = "";
            }
            lastHiglight = elm.parentNode;
            lastHiglight.className = "high";
        }
    }
    var reTags = /(td|tr|tbody)/i;
    document.body.onmouseout = bigTable.onmouseout = function (e) {
        e = e || window.event;
        var elm = e.target || e.srcElement;
        var tag = elm.nodeName.toLowerCase();
        if (!reTags.test(tag)) {
            if (lastHiglight) {
                lastHiglight.className = "";
            }
        }
    }
}
      
renderTable();
    </script>
    <p>Awesome Table</p>
 </body>
</html>
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers