Benutzer:Shadowtweaker/Vorlage:AtkTable

Toggle + JavaScript

/* initialize generation and position labels */
$(".at").each(function() {
	coltogen = $(this).find("thead tr:nth-child(2) th").toArray().map((x, i) => [x.dataset.gen, x.dataset.gen].slice(0, x.colSpan).join(",")).join(",").split(",");
	$(this).find("tbody tr").each(function() {
		$(this).find("td").toArray().slice(0, coltogen.length).forEach((x, i) => x.dataset.gen = coltogen[i]);
	});
});
$(".at tbody tr").each((a, b) => b.setAttribute("data-pos", a));

/* initialize toggle buttons */
$(".at_toggle").each(function(index, object) {
	var toggle = document.createElement("a");
	toggle.className = 'at_togglerlink';
	toggle.setAttribute('href', 'javascript:at_toggle("' + object.getAttribute("data-for") + '");');
	var child = object.firstChild;
	object.removeChild(child);
	toggle.appendChild(child);
	object.insertBefore(toggle, object.firstChild);
});

/* toggler function */
function at_toggle(gen) {
	/* general toggling of generation-specific data */
	$("*[data-gen]").each(function() {
		if (this.dataset.gen == "-0") this.style.display = (gen == 0 ? "" : "none");
		else if (gen != 0 && Math.abs(this.dataset.gen) != gen) this.style.display = "none";
		else if (gen == 0 && this.dataset.gen < 0) this.style.display = "none";
		else this.style.display = "";
	});
	/* toggle rows that are irrelevant for this generation */
	$(".at tbody tr").each(function() {
		$(this)[0].style.display = "";
		if (gen != 0 && !$(this).find("td").toArray().filter(x => x.dataset.gen == gen).map(x => x.innerText != "—").reduce((acc, cv) => acc || cv, false))
			$(this)[0].style.display = "none";
	});
	/* sort rows by level */
	/*$(".at_l").each(function() {
		rows = [];
		$(this).find("tbody tr").each((a, b) => rows.push(b));
		if (gen == 0)
			rows = rows.sort((a, b) => a.getAttribute("data-pos") - b.getAttribute("data-pos"));
		else
			rows = rows.sort((a, b) => parseInt($(a).find("td:nth-child(" + gen + ")")[0].innerText.replace("—", "101")) - parseInt($(b).find("td:nth-child(" + gen + ")")[0].innerText.replace("—", "101")));
		$(this).find("tbody")[0].innerHTML = rows.map(x => x.outerHTML).join("");
	});*/
}

Welche Generationen sollen angezeigt werden?
1. Gen.	2. Gen.	3. Gen.	4. Gen.	5. Gen.	6. Gen.	7. Gen.	alle