Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<input id="preview_text"> <div id="table"> <table> <tr> <th>#</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th>F</th> <th>G</th> <th>H</th> <th>I</th> <th>J</th> <th>K</th> <th>L</th> <th>M</th> <th>N</th> </tr> <tr id="row0" class=""> <td>1</td> <td onclick="select_cell(this, 0, 0)" data-row="0" data-col="0" id="active"></td> <td onclick="select_cell(this, 0, 1)" data-row="0" data-col="1">lorem ipsum</td> <td onclick="select_cell(this, 0, 2)" data-row="0" data-col="2">lorem ipsum</td> <td onclick="select_cell(this, 0, 3)" data-row="0" data-col="3">lorem ipsum</td> <td onclick="select_cell(this, 0, 4)" data-row="0" data-col="4">lorem ipsum</td> <td onclick="select_cell(this, 0, 5)" data-row="0" data-col="5">lorem ipsum</td> <td onclick="select_cell(this, 0, 6)" data-row="0" data-col="6">lorem ipsum</td> <td onclick="select_cell(this, 0, 7)" data-row="0" data-col="7"></td> <td onclick="select_cell(this, 0, 8)" data-row="0" data-col="8">lorem ipsum</td> <td onclick="select_cell(this, 0, 9)" data-row="0" data-col="9">lorem ipsum</td> <td onclick="select_cell(this, 0, 10)" data-row="0" data-col="10"></td> <td onclick="select_cell(this, 0, 11)" data-row="0" data-col="11"></td> <td onclick="select_cell(this, 0, 12)" data-row="0" data-col="12"></td> </tr> <tr id="row1" class=""> <td>2</td> <td onclick="select_cell(this, 1, 0)" data-row="1" data-col="0"></td> <td onclick="select_cell(this, 1, 1)" data-row="1" data-col="1">lorem ipsum</td> <td onclick="select_cell(this, 1, 2)" data-row="1" data-col="2">lorem ipsum</td> <td onclick="select_cell(this, 1, 3)" data-row="1" data-col="3">lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</td> <td onclick="select_cell(this, 1, 4)" data-row="1" data-col="4">lorem ipsum</td> <td onclick="select_cell(this, 1, 5)" data-row="1" data-col="5">lorem ipsum</td> <td onclick="select_cell(this, 1, 6)" data-row="1" data-col="6">lorem ipsum</td> <td onclick="select_cell(this, 1, 7)" data-row="1" data-col="7"></td> <td onclick="select_cell(this, 1, 8)" data-row="1" data-col="8"></td> <td onclick="select_cell(this, 1, 9)" data-row="1" data-col="9"></td> <td onclick="select_cell(this, 1, 10)" data-row="1" data-col="10"></td> <td onclick="select_cell(this, 1, 11)" data-row="1" data-col="11"></td> <td onclick="select_cell(this, 1, 12)" data-row="1" data-col="12"></td> </tr> <tr id="row2" class="row_active"> <td>3</td> <td onclick="select_cell(this, 2, 0)" data-row="2" data-col="0"></td> <td onclick="select_cell(this, 2, 1)" data-row="2" data-col="1">lorem ipsum</td> <td onclick="select_cell(this, 2, 2)" data-row="2" data-col="2">lorem ipsum</td> <td onclick="select_cell(this, 2, 3)" data-row="2" data-col="3">lorem ipsum</td> <td onclick="select_cell(this, 2, 4)" data-row="2" data-col="4">lorem ipsum</td> <td onclick="select_cell(this, 2, 5)" data-row="2" data-col="5">lorem ipsum</td> <td onclick="select_cell(this, 2, 6)" data-row="2" data-col="6">lorem ipsum</td> <td onclick="select_cell(this, 2, 7)" data-row="2" data-col="7"></td> <td onclick="select_cell(this, 2, 8)" data-row="2" data-col="8"></td> <td onclick="select_cell(this, 2, 9)" data-row="2" data-col="9"></td> <td onclick="select_cell(this, 2, 10)" data-row="2" data-col="10"></td> <td onclick="select_cell(this, 2, 11)" data-row="2" data-col="11"></td> <td onclick="select_cell(this, 2, 12)" data-row="2" data-col="12"></td> </tr> <tr id="row3"> <td>4</td> <td onclick="select_cell(this, 3, 0)" data-row="3" data-col="0"></td> <td onclick="select_cell(this, 3, 1)" data-row="3" data-col="1">lorem ipsum</td> <td onclick="select_cell(this, 3, 2)" data-row="3" data-col="2">lorem ipsum</td> <td onclick="select_cell(this, 3, 3)" data-row="3" data-col="3">lorem ipsum</td> <td onclick="select_cell(this, 3, 4)" data-row="3" data-col="4">lorem ipsum</td> <td onclick="select_cell(this, 3, 5)" data-row="3" data-col="5">lorem ipsum</td> <td onclick="select_cell(this, 3, 6)" data-row="3" data-col="6">lorem ipsum</td> <td onclick="select_cell(this, 3, 7)" data-row="3" data-col="7"></td> <td onclick="select_cell(this, 3, 8)" data-row="3" data-col="8">lorem ipsum</td> <td onclick="select_cell(this, 3, 9)" data-row="3" data-col="9"></td> <td onclick="select_cell(this, 3, 10)" data-row="3" data-col="10"></td> <td onclick="select_cell(this, 3, 11)" data-row="3" data-col="11">lorem ipsum</td> <td onclick="select_cell(this, 3, 12)" data-row="3" data-col="12">lorem ipsum</td> </tr> </table> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body, #preview_text {font-size: 14px; font-family: arial, sans-serif;} #table {width: 100%; margin-top: 60px; overflow: auto;} table {border-collapse: collapse;} th {white-space: nowrap;} td, th {padding: 5px 8px; border: 1px solid #aaa; white-space: nowrap; text-align: left;} #active {border-color: red; border-width: 2px;} .row_active td {background: #eee; padding: 4px 7px;} td:first-child + td + td {font-weight: bold;} #preview_text {position: fixed; top: 8px; left: 8px; width: 96%; width: calc(100% - 16px); height: 30px; border: 1px solid #333; padding: 5px 10px; height: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
CSS
Autoformát
CSS reset
Až na konci
clear = function() { var eventTypes = ["onkeydown", "onkeypress", "onkeyup"]; var codeTypes = ["keycode", "charcode", "which"]; for (var event = 0; event < eventTypes.length; event++) { for (var code = 0; code < codeTypes.length; code++) { } } }; processKeyEvent = function(eventType, event) { // MSIE hack if (window.event) { event = window.event; } if (document.getElementById('preview_text') === document.activeElement && ( parseInt(event.keyCode) >= 37 && parseInt(event.keyCode) <= 40 || parseInt(event.charCode) >= 37 && parseInt(event.charCode) <= 40 || parseInt(event.which) >= 37 && parseInt(event.which) <= 40 ) ) { return true; } var move; if (parseInt(event.keyCode) == 37 || parseInt(event.charCode) == 37 || parseInt(event.which) == 37) { move = 'left'; } else if (parseInt(event.keyCode) == 38 || parseInt(event.charCode) == 38 || parseInt(event.which) == 38) { move = 'up'; } else if (parseInt(event.keyCode) == 39 || parseInt(event.charCode) == 39 || parseInt(event.which) == 39) { move = 'right'; } else if (parseInt(event.keyCode) == 40 || parseInt(event.charCode) == 40 || parseInt(event.which) == 40) { move = 'down'; } if (move) { var current_active = document.getElementById('active'); var current_active_row = parseInt(current_active.getAttribute('data-row')); var current_active_col = parseInt(current_active.getAttribute('data-col')); current_active.id = ''; switch (move) { case 'left': document.querySelector('[data-row="' + current_active_row + '"][data-col="' + (Math.max(current_active_col - 1, 0)) + '"]').id = 'active'; break; case 'up': document.querySelector('[data-row="' + (Math.max(current_active_row - 1, 0)) + '"][data-col="' + current_active_col + '"]').id = 'active'; document.querySelector('.row_active').className = ''; document.getElementById('row' + Math.max(current_active_row - 1, 0)).className = 'row_active'; break; case 'right': document.querySelector('[data-row="' + current_active_row + '"][data-col="' + (Math.min(document.getElementById('row1').getElementsByTagName('td').length - 2, current_active_col + 1)) + '"]').id = 'active'; break; case 'down': document.querySelector('[data-row="' + (Math.min(document.getElementsByTagName('tr').length - 2, current_active_row + 1)) + '"][data-col="' + current_active_col + '"]').id = 'active'; document.querySelector('.row_active').className = ''; document.getElementById('row' + Math.min(document.getElementsByTagName('tr').length - 2, current_active_row + 1)).className = 'row_active'; break; } if (!document.getElementById('active')) { document.querySelector('[data-row="0"][data-col="0"]').id = 'active'; document.getElementById('row0').className = 'row_active'; } document.getElementById('preview_text').value = document.getElementById('active').innerHTML; document.getElementById('preview_text').setAttribute('data-active_row', document.getElementById('active').getAttribute('data-row')); document.getElementById('preview_text').setAttribute('data-active_col', document.getElementById('active').getAttribute('data-col')); } }; processKeyDown = function(event) { clear(); processKeyEvent("onkeydown", event); }; processKeyPress = function(event) { processKeyEvent("onkeypress", event); }; processKeyUp = function(event) { //processKeyEvent("onkeyup", event); }; window.onkeydown = processKeyDown; window.onkeypress = processKeyPress; window.onkeyup = processKeyUp; document.getElementById('preview_text').onblur = function() { document.querySelector('[data-row="' + this.getAttribute('data-active_row') + '"][data-col="' + this.getAttribute('data-active_col') + '"]').innerHTML = this.value; } function select_cell(el, row, col) { document.getElementById('active').id = ''; el.id = 'active'; document.getElementById('preview_text').value = el.innerHTML; document.getElementById('preview_text').setAttribute('data-active_row', el.getAttribute('data-row')); document.getElementById('preview_text').setAttribute('data-active_col', el.getAttribute('data-col')); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>