Keyboard & mouse control on this heavy table !
A Pen by Jaime Gaspar on CodePen.
Keyboard & mouse control on this heavy table !
A Pen by Jaime Gaspar on CodePen.
<div class='main'> | |
<section class="content"> | |
<h1>heavyTable.js</h1> | |
<p> | |
Ce plugin jQuery vous permet d'éditer n'importe quel <<code>table</code>> grâce à la souris ou au clavier. | |
</p> | |
</section> | |
<table class="heavyTable"> | |
<thead> | |
<tr> | |
<th>Body</th> | |
<th>Section</th> | |
<th>Article</th> | |
<th>Table</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>1</td> | |
<td>2</td> | |
<td>2</td> | |
<td>13</td> | |
</tr> | |
<tr> | |
<td>25</td> | |
<td>2</td> | |
<td>6</td> | |
<td>654</td> | |
</tr> | |
<tr> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td></td> | |
<td></td> | |
<td></td> | |
</tr> | |
</tbody> | |
</table> | |
<section class="content"> | |
<div class="download"> | |
<a class="button" href="https://github.com/victordarras/HeavyTable.js"> heavyTable.js on Github</a> | |
</div><br> | |
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Modifier un <table> comme un tableur avec jquery.heavyTable.js" data-via="victordarras" data-lang="fr" data-size="large" data-hashtags="jqueryplugin">Tweeter</a> | |
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> | |
<h2>Installation</h2> | |
<pre> | |
$('.heavyTable').heavyTable({ | |
xPosition: 2, | |
yPosition: 2 | |
}); | |
</pre> | |
</section> | |
</div> |
// jQuery function | |
(function($) { | |
$.fn.heavyTable = function(params) { | |
params = $.extend( { | |
startPosition: { | |
x: 1, | |
y: 1 | |
} | |
}, params); | |
this.each(function() { | |
var | |
$hTable = $(this).find('tbody'), | |
i = 0, | |
x = params.startPosition.x, | |
y = params.startPosition.y, | |
max = { | |
y: $hTable.find('tr').length, | |
x: $hTable.parent().find('th').length | |
}; | |
//console.log(xMax + '*' + yMax); | |
function clearCell () { | |
content = $hTable.find('.selected input').val(); | |
$hTable.find('.selected').html(content); | |
$hTable.find('.selected').toggleClass('selected'); | |
} | |
function selectCell () { | |
if ( y > max.y ) y = max.y; | |
if ( x > max.x ) x = max.x; | |
if ( y < 1 ) y = 1; | |
if ( x < 1 ) x = 1; | |
currentCell = | |
$hTable | |
.find('tr:nth-child('+(y)+')') | |
.find('td:nth-child('+(x)+')'); | |
content = currentCell.html(); | |
currentCell | |
.toggleClass('selected') | |
return currentCell; | |
} | |
function edit (currentElement) { | |
var input = $('<input>', {type: "text"}) | |
.val(currentElement.html()) | |
currentElement.html(input) | |
input.focus(); | |
} | |
$hTable.find('td').click( function () { | |
clearCell(); | |
x = ($hTable.find('td').index(this) % (max.x) + 1); | |
y = ($hTable.find('tr').index($(this).parent()) + 1); | |
edit(selectCell()); | |
}); | |
$(document).keydown(function(e){ | |
if (e.keyCode == 13) { | |
clearCell(); | |
edit(selectCell()); | |
} else if (e.keyCode >= 37 && e.keyCode <= 40 ) { | |
clearCell(); | |
switch (e.keyCode) { | |
case 37: x--; | |
break; | |
case 38: y--; | |
break; | |
case 39: x++; | |
break; | |
case 40: y++; | |
break; | |
} | |
selectCell(); | |
return false; | |
} | |
}); | |
}); | |
}; | |
})(jQuery); | |
// call our jQuery function | |
$('.heavyTable').heavyTable({ | |
xPosition: 2, | |
yPosition: 2 | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
* { | |
box-sizing: border-box; | |
} | |
body { | |
background: steelblue; | |
font-family: "Open Sans", arial; | |
} | |
table { | |
width: 100%; | |
max-width: 600px; | |
height: 320px; | |
border-collapse: collapse; | |
border: 1px solid #38678f; | |
margin: 50px auto; | |
background: white; | |
} | |
th { | |
background: steelblue; | |
height: 54px; | |
width: 25%; | |
font-weight: lighter; | |
text-shadow: 0 1px 0 #38678f; | |
color: white; | |
border: 1px solid #38678f; | |
box-shadow: inset 0px 1px 2px #568ebd; | |
transition: all 0.2s; | |
} | |
tr { | |
border-bottom: 1px solid #cccccc; | |
} | |
tr:last-child { | |
border-bottom: 0px; | |
} | |
td { | |
border-right: 1px solid #cccccc; | |
padding: 10px; | |
transition: all 0.2s; | |
} | |
td:last-child { | |
border-right: 0px; | |
} | |
td.selected { | |
background: #d7e4ef; | |
z-index: ; | |
} | |
td input { | |
font-size: 14px; | |
background: none; | |
outline: none; | |
border: 0; | |
display: table-cell; | |
height: 100%; | |
width: 100%; | |
} | |
td input:focus { | |
box-shadow: 0 1px 0 steelblue; | |
color: steelblue; | |
} | |
::-moz-selection { | |
background: steelblue; | |
color: white; | |
} | |
::selection { | |
background: steelblue; | |
color: white; | |
} | |
.heavyTable { | |
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
animation: float 5s infinite; | |
} | |
.main { | |
max-width: 600px; | |
padding: 10px; | |
margin: auto; | |
} | |
.content { | |
color: white; | |
text-align: center; | |
} | |
.content p, | |
.content pre, | |
.content h2 { | |
text-align: left; | |
} | |
.content pre { | |
padding: 1.2em 0 0.5em; | |
background: white; | |
background: rgba(255, 255, 255, 0.7); | |
border: 1px solid rgba(255, 255, 255, 0.9); | |
color: #38678f; | |
} | |
.content .download { | |
margin: auto; | |
background: rgba(255, 255, 255, 0.1); | |
display: inline-block; | |
padding: 1em 1em; | |
border-radius: 12em; | |
margin-bottom: 2em; | |
} | |
.content .button { | |
display: inline-block; | |
text-decoration: none; | |
color: white; | |
height: 48px; | |
line-height: 48px; | |
padding: 0 20px; | |
border-radius: 24px; | |
border: 1px solid #38678f; | |
background: steelblue; | |
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 3px rgba(255, 255, 255, 0.2); | |
transition: all 0.1s; | |
} | |
.content .button:hover { | |
background: #4f8aba; | |
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.1); | |
} | |
.content .button:active { | |
color: #294d6b; | |
background: #427aa9; | |
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.2); | |
} | |
.content .button:focus { | |
outline: none; | |
} | |
h1 { | |
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
text-align: center; | |
} |