[FRAGE] Tabellenspalte "rotieren" ?
- Ersteller haiiiner
- Erstellt am
kkapsner
Super Moderator
Dass man mal zwei Tage keine Reaktion auf eine Frage bekommt, ist in einem Forum, in dem Leute freiwillig und unentgeldlich helfen, nicht unüblich (v.a. wenn kein Wochenende dabei ist.). Habe einfach etwas mehr Geduld.
Prinzipiell denke ich, dass dein Problem nicht besonders schwer ist. Elemente in einer Tabelle umzusortieren ist ja auch keine unübliche Aufgabe (ich würde dabei aber auf keinen Fall mit innerHTML arbeiten, sondern die Nodes direkt verschieben)
Prinzipiell denke ich, dass dein Problem nicht besonders schwer ist. Elemente in einer Tabelle umzusortieren ist ja auch keine unübliche Aufgabe (ich würde dabei aber auf keinen Fall mit innerHTML arbeiten, sondern die Nodes direkt verschieben)
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<script>
(function(){
function createCell(type, content){
var cell = document.createElement(type);
cell.innerHTML = content;
return cell;
}
var table = document.createElement("table");
table.id = "table";
var tHead = document.createElement("thead");
var tHeadRow = document.createElement("tr");
tHead.appendChild(tHeadRow);
tHeadRow.appendChild(createCell("td", ""));
table.appendChild(tHead);
for (var i = 1; i <= 5; i += 1){
tHeadRow.appendChild(createCell("th", i));
var row = document.createElement("tr");
row.appendChild(createCell("th", i));
for (var j = 1; j <= 5; j += 1){
row.appendChild(createCell("td", i + "." + j));
}
table.appendChild(row);
}
document.body.appendChild(table);
}());
(function(){
function moveToFront(){
var index = this.cellIndex === 0?
this.parentNode.rowIndex:
this.cellIndex;
var table = this.parentNode.parentNode;
while (table && table.tagName !== "TABLE"){
table = table.parentNode;
if (!table){
return;
}
}
for (var i = index - 1; i > 0; i -= 1){
table.appendChild(table.rows[1]);
}
Array.prototype.slice.call(table.rows).forEach(function(row){
for (var i = index - 1; i > 0; i -= 1){
row.appendChild(row.cells[1]);
}
});
}
var table = document.getElementById("table");
Array.prototype.slice.call(table.getElementsByTagName("th")).forEach(function(th){
th.addEventListener("click", moveToFront, false);
});
}());
</script>
</body>
</html>
mikdoe
Moderator
die urspr. frage war:
Liebe Forenbewohner,
in dieser HTML-Tabelle habe ich bereits die Titelzeile "rotierbar" gemacht (hatte massiv Hilfe), d.h. Klick auf ein Feld (außer erstes Feld) bewirkt horizontale Umsortierung:
Tabelle
Jetzt soll allerdings auch die erste Tabellenspalte synchron / gekoppelt zur Titelzeile vertikal rotieren - d.h. Klick auf einen beliebiges Feld (außer erstes) entweder der ersten Tabellenspalte oder der Titelzeile soll eine gleichzeitige Umsortierung von Titelzeile und erster Tabellenspalte bewirken (da Titelzeile und erste Spalte den gleichen Inhalt haben, ist dies sinnvoll).
Ich hab nur leider nicht die geringste Ahnung, wie man das machen könnte - weiß einer von Euch Rat?
Der Code für das horizontale Rotieren lautet:
HTML:function spin(row_id, start, length) { var content = document.querySelector("#" + row_id).cells; var cache = new Array(); for(var table_pos = start;table_pos<content.length;table_pos++) { if(table_pos < start+length) { cache[table_pos] = content[table_pos].innerHTML; } else { content[table_pos-length].innerHTML = content[table_pos].innerHTML; } } for(var cache_pos = start;cache_pos<cache.length;cache_pos++) { content[content.length-start+(cache_pos-length)].innerHTML = cache[cache_pos]; } }