Table Transformation

by markallgood

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://datatables.net/release-datatables/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css">
<link rel="stylesheet" href="http://datatables.net/release-datatables/media/css/demo_table_jui.css">
<h1>My Table</h1>
<table id="mytable">
    <thead></thead>
    <tbody></tbody>
</table>

CSS

td{font-weight: bold;}

JavaScript

$(function() {
    var numColumns = 3;
    var numRows = 20;
    
    var _table = $("#mytable");
    var _tablehead = $("#mytable thead");
    var _tablebody = $("#mytable tbody");

    // Header
    var headerrow = $("<tr />").appendTo(_tablehead);
    for (a = 1; a <= numColumns; a++) {
        $("<th />").text("Column " + a).addClass("ui-state-default").appendTo(headerrow);
    }

    // Rows
    for(i = 1; i <= numRows; i++) {
        var row = $("<tr />").appendTo(_tablebody);
        for (j = 1; j <= numColumns; j++) {
            $("<td />").text("Field " + i + "-" + j).addClass("ui-widget-content").appendTo(row);
        }
    }
    
     $("#mytable tr").hover(
         function()
         {
              $(this).children("td").addClass("ui-state-hover");
         },
         function()
         {
          $(this).children("td").removeClass("ui-state-hover");
         }
    );
     $("#mytable tr").click(function(){
       $(this).children("td").toggleClass("ui-state-highlight");
      });
    
});