JSFiddle - React, Tailwind, and code Playground

by michapixel

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<table class="table table-striped table-bordered">
    <thead><tr>    
    </tr></thead>
    <tbody></tbody>
</table>

<button id="Print" class="btn btn-info" type="submit">
    <i class="icon icon-white icon-print"></i> Drucken
</button>

CSS

* {
outline:none!important;
}
body {margin:15px;}

table {
    height:412px!important;
    width:412px!important;
}

th.over, td.over {
 background-color:#F89406!important;
  color:#FFF;
   font-weight:bold;
    cursor:pointer;
}

th, td {
    text-align:center!important;
    width:40px!important;
    height:40px!important;
    line-height:40px!important;
    padding: 0!important;
}

JavaScript

trace = console.log;

var row = $('<tr></tr>');
var cell = $('<td></td>');
var hcell = $('<th></th>');

var hc = hcell.clone();
hc.text('1x1')
hc.appendTo('thead tr');
for (var n = 0; n < 10; n++) {
    var hc = hcell.clone();
    hc.text((n+1) + ' *' )
    hc.appendTo('thead tr');
    
    var row = row.clone();
    var cells = '<td><b>' + (n+1) + ' *</b></td>';
    
    for(var r = 0; r < 10; r++) {
        cells += '<td data-id="' + (r+1) + '" class="inner">' + ( (r+1)*(n+1) ) + '</td>';
    }
    row.html(cells);
    $(row).appendTo('tbody');
}

$('tbody').on('mouseenter', 'td', function(ev){
   $('table .over').removeClass('over');
   $('td:first', $(this).parent()).addClass('over');
   var id = $(this).data('id');
   $('thead th:nth-child(' + (id+1) + ')').addClass('over');
   $(this).addClass('over');
   $('th:not(".over"), td:not(".over")').css('opacity', 0.5);
   
});
$('tbody').on('mouseleave', 'tr, td', function(ev){
    $('table .over').removeClass('over');
    $('th, td').css('opacity', 1);
});



$('#Print').on('click', function(ev){
    ev.preventDefault();
    $('#Print').hide();
    //
    window.print() 
    setTimeout(function(){
        $('#Print').show();
    }, 1000)
});