Web-Generate

Ich bin vor kurzem in die Verlegenheit gekommen, eine HTML Tabelle mehrspaltig machen zu müssen.
Dafür musste ich einen mehrzeiligen Header erstellen.

Natürlich wird dies unübersichtlich wenn man jetzt die Spalten mit Textboxen oder anderem nicht beschriftet.
Da dies so nicht gewünscht wurde, musste ich mir etwas einfallen lassen.

Ich hab den Tableheader verwendet.
Mit diesem Javascript (jQuery) Code, habe ich anhand der Zeile und Spalte erkannt, für was z.B. die Textbox gedacht war.

Hiermit wird die Headerspalte grau hinterlegt, je nachdem welche Zeile / Spalte man anklickt.

// On Focus in
$("td > input[type=text], td > select").live("focusin", function (event) {

	// Get Column and Row from current selection
	var col = $(this).parents("tr").children().index($(this).parents("td"));
	var row = $(this).parents("tbody").children().index($(this).parents("tr"));

	// Count the Rows from Header,
	// so that we know, how many rows are really one "row"
	var rowCount = $(this).parents("table").children("thead").children().length;

	// Calculate the correct header row
	while (row > (rowCount - 1)) {
		row = row - rowCount;
	}

	// Change the Header columns color
	$(this).parents("table").children("thead").children("tr:eq(" + row + ")").children("th:eq(" + col + ")").css('background', '#AEAEAE');
});

// On Focus out
$("td > input[type=text], td > select").live("focusout", function (event) {

	// Get Column and Row from current selection
	var col = $(this).parents("tr").children().index($(this).parents("td"));
	var row = $(this).parents("tbody").children().index($(this).parents("tr"));

	// Count the Rows from Header,
	// so that we know, how many rows are really one "row"
	var rowCount = $(this).parents("table").children("thead").children().length;

	// Calculate the correct header row
	while (row > (rowCount - 1)) {
		row = row - rowCount;
	}

	// Change the Header columns color
	$(this).parents("table").children("thead").children("tr:eq(" + row + ")").children("th:eq(" + col + ")").css('background', '');
});

Viel Spaß damit,
KampfFussel

Category: Coding, Javascript by KampfFussel