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
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <table cellpadding=0 cellspacing=0 id="md-table" class="ui-selectable"> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> <tr><td><td><td><td><td><td><td><td><td><td> </table> <div id="dimension"></div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { margin: 0; } table { border-collapse: collapse; } td { min-width: 30px; height: 30px; border: 1px solid rgb(190, 190, 190); padding:0; } td.ui-selecting { background-color: #f5dea3; /*box-shadow: 0 0 0 1px #8e8650;*/ border: 1px solid #0000ff; } #dimension { background-color: lightblue; padding: 5px; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 1); position: relative; }
CSS
Autoformát
CSS reset
Až na konci
$(document) .ready(function () { var bunky = []; var minmax = function(){ hranice=bunky.reduce(function(docasne,el){ docasne.minx=Math.min(docasne.minx,el.cellIndex); docasne.maxx=Math.max(docasne.maxx,el.cellIndex); docasne.miny=Math.min(docasne.miny,el.parentNode.rowIndex); docasne.maxy=Math.max(docasne.maxy,el.parentNode.rowIndex); return docasne; },{minx:Infinity,maxx:-1,miny:Infinity,maxy:-1}); console.log(hranice); var dimension_x = (hranice.maxx-hranice.minx)+1; var dimension_y = (hranice.maxy-hranice.miny)+1; $("#dimension").text(dimension_x + " x " + dimension_y); }; $("table") .selectable({ filter: "td", start:function(event, ui) { bunky = []; }, selecting: function( event, ui ) { bunky.push(ui.selecting); minmax(); }, unselecting: function( event, ui ) { var index = bunky.indexOf(ui.unselecting); if(index !== -1){ bunky.splice(index,1); } minmax(); } }); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>