Živá ukázka

Výsledek

<p id="pocitadlo">
    Umíš:<br>
    <span id="pocet"></span> / <span id="celkem"></span>
</p>

<table id="table">
	<tr>
		<td>OLL 1</td>
		<td>
			<img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=R U2 R2' F R F' U2 R' F R F'&amp;view=plan" />
		</td>
		<td>
			R U2 R2' F R F' U2 R' F R F'<br />
			R U B' R B R2 U' R' F R F'<br />
			y R U' R2 D' r U' r' D R2 U R'<br />
			r U R' U R' r2 U' R' U R' r2 U2 r'<br />				
		</td>
		<td>
			<input type="checkbox" onchange="myScript(this)">
		</td>
	</tr>
	<tr>
		<td>OLL 2</td>
		<td>
			<img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=F R U R' U' F' f R U R' U' f'&amp;view=plan" />
		</td>
		<td>
			F R U R' U' F' f R U R' U' f'<br />
			F R U R' U' S R U R' U' f'<br />
			y r U r' U2 R U2 R' U2 r U' r'<br />
			F R U r' U' R U R' M' U' F'<br />				
		</td>
		<td>
			<input type="checkbox" onchange="myScript(this)">
		</td>
	</tr>
	<tr>
		<td>OLL 3</td>
		<td>
			<img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=r' R2 U R' U r U2 r' U M'&amp;view=plan" />
		</td>
		<td>
			y' f R U R' U' f' U' F R U R' U' F'<br />
			r' R2 U R' U r U2 r' U M'<br />
			r' R U R' F2 R U L' U L M'<br />
			y F U R U' R' F' U F R U R' U' F'<br />				
		</td>
		<td>
			<input type="checkbox" onchange="myScript(this)">
		</td>
	</tr>
	<tr>
		<td>OLL 4</td>
		<td>
			<img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=M U' r U2 r' U' R U' R2 r&amp;view=plan" />
		</td>
		<td>
			y' f R U R' U' f' U F R U R' U' F'<br />
			M U' r U2 r' U' R U' R2 r<br />
			y F U R U' R' F' U' F R U R' U' F'<br />
			y' f R U R' d' l' F R U R' U' F'<br />				
		</td>
		<td>
			<input type="checkbox" onchange="myScript(this)">
		</td>
	</tr>
	<tr>
		<td>OLL 5</td>
		<td>
			<img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=r' U2 R U R' U r&amp;view=plan" />
		</td>
		<td>
			r' U2 R U R' U r<br />
			y2 l' U2 L U L' U l<br />
			y2 R' F2 r U r' F R<br />
			L' U' L2 F' L' F2 U' F'<br />				
		</td>
		<td>
			<input type="checkbox" onchange="myScript(this)">
		</td>
	</tr>
	<tr>
		<td>OLL 6</td>
		<td>
			<img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=r U2 R' U' R U' r'&amp;view=plan" />
		</td>
		<td>
			r U2 R' U' R U' r'<br />
			y2 l U2 L' U' L U' l'<br />
			y2 R U R2 F R F2 U F<br />
			y' x' D R2 U' R' U R' D' x<br />				
		</td>
		<td>
			<input type="checkbox" onchange="myScript(this)">
		</td>
	</tr>
	<tr>
		<td>OLL 7</td>
		<td>
			<img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=r U R' U R U2 r'&amp;view=plan" />
		</td>
		<td>
			r U R' U R U2 r'<br />
			L' U2 L U2 L F' L' F<br />
			F R' F' R U2 R U2 R'<br />
			y2 l U L' U L U2 l'<br />				
		</td>
		<td>
			<input type="checkbox" onchange="myScript(this)">
		</td>
	</tr>
	<tr>
		<td>OLL 8</td>
		<td>
			<img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=l' U' L U' L' U2 l&amp;view=plan" />
		</td>
		<td>
			y2 r' U' R U' R' U2 r<br />
			l' U' L U' L' U2 l<br />
			R U2 R' U2 R' F R F'<br />
			F' L F L' U2 L' U2 L<br />				
		</td>
		<td>
			<input type="checkbox" onchange="myScript(this)">
		</td>
	</tr>
	<tr>
		<td>OLL 9</td>
		<td>
			<img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=R U2 R' M' U' R U' R' U M&amp;view=plan" />
		</td>
		<td>
			y R U R' U' R' F R2 U R' U' F'<br />
			y2 R' U' R U' R' U R' F R F' U R<br />
			r' R2 U2 R' U' R U' R' U' M'<br />
			y' L' U' L U' L F' L' F L' U2 L<br />				
		</td>
		<td>
			<input type="checkbox" onchange="myScript(this)">
		</td>
	</tr>
	<tr>
		<td>OLL 10</td>
		<td>
			<img src="http://stachu.cubing.net/v/?fmt=png&size=100&bg=t&stage=oll&case=R U R' y R' F R U' R' F' R&amp;view=plan" />
		</td>
		<td>
			R U R' U R' F R F' R U2 R'<br />
			R U R' y R' F R U' R' F' R<br />
			y2 L' U' L U L F' L2 U' L U F<br />
			R U R' y' r' U r U' r' U' r<br />				
		</td>
		<td>
			<input type="checkbox" onchange="myScript(this)">
		</td>
	</tr>
</table>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

var sada = "OLL";

function updatePocitadlo() {
    var inputs = document.querySelectorAll('#table input');
    var pocet = 0;
    for (var i = 0; i < inputs.length; i++) {
        pocet += inputs[i].checked;
    }
    
    document.getElementById('pocet').innerHTML = pocet;
    document.getElementById('celkem').innerHTML = inputs.length;
}

function myScript(elem) {
    var row = elem.parentNode.parentNode;
    document.cookie = sada + row.rowIndex + "=" + (elem.checked ? 'Y' : 'N');
    row.className = (elem.checked ? 'Y' : '');
    
    updatePocitadlo();
}

function restore() {
    var table = document.getElementById('table');
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
        var checked = cookies[i].match(sada + '(\\d+)=Y');
        if (checked) {
            var row = table.rows[checked[1]];
            row.querySelector('input').checked = true;
            row.className = 'Y';
        }
    }
    
    updatePocitadlo();
}

restore();

JS

Autoformát
jQuery
Umístění JS