• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Tabellenmanipulation

C

Coup

New member
Hallo ihr nichtgrünschnäbel,
Ich benutze zur Manipulation meiner Tabelle ( Hinzufügen von Spalten) folgende Funktion.
Code: 
function addiereSpalte(tableId)
{
  var table = document.getElementById(tableId);
  if (table == undefined) return;
  var rowNb = table.rows.length;

  var bAddNames = (table.tHead.rows[0].cells.length % 2 == 1);
  var neueZelle = table.rows[0].cells[bAddNames ? 1 : 0].cloneNode(true);
  table.rows[0].appendChild(neueZelle);

  for(var i = 1; i < rowNb; i++)
  {
    neueZelle = table.rows[i].cells[0].cloneNode(bAddNames);
    table.rows[i].appendChild(neueZelle);
  }
}

Nun versuche ich seit über ner Stunde den Code so abzuändern das ich die letzte Spalte auch wieder entfernen kann.
Doch führt nichts zum Erfolg :(, Ich muss doch sicher den cloneNode durch ein removeChild() ersetzen oder ?.

Ich wäre für Hilfe wirklich dankbar :)

lg
Flo
 
Code: 
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
<table rules="all" id="tabelle" style="border:1px solid black;border-collapse:separate;">
	<thead>
		<tr>
			<th>kopf1</th><th>kopf2</th>
		</tr>
	</thead>
	<tr>
		<td>foo</td><td>bar</td>
	</tr>
	<tr>
		<td>foo2</td><td>bar2</td>
	</tr>
</table>
<input type="button" value="add" onclick="addiereSpalte('tabelle');">
<input type="button" value="sub" onclick="subtrahiereSpalte('tabelle');">
<script>
function addiereSpalte(tableId)
{
  var table = document.getElementById(tableId);
  if (table == undefined) return;
  var rowNb = table.rows.length;

  var bAddNames = (table.tHead.rows[0].cells.length % 2 == 1);
  var neueZelle = table.rows[0].cells[bAddNames ? 1 : 0].cloneNode(true);
  table.rows[0].appendChild(neueZelle);

  for(var i = 1; i < rowNb; i++)
  {
    neueZelle = table.rows[i].cells[0].cloneNode(bAddNames);
    table.rows[i].appendChild(neueZelle);
  }
}
function subtrahiereSpalte(tableId) {
	var table = document.getElementById(tableId);
	for(var i = 0; i < table.rows.length; i++) {
		var zeile = table.rows[i];
		zeile.removeChild(zeile.lastChild);
	}
}
</script>
</body>
</html>
 
Zuletzt bearbeitet:
Achja,
Wo ich grad noch auf die Knotenklonung schaue.
Ist es hier überhaupt möglich der neu erstellten Zelle anderen Inhalt zu geben als den den der geklonten ?
Also in deinem Beispiel wird ja fortlaufend z.B Kopf2,Kopf1 erstellt/kopiert. Gibt es hier einen Weg den Inhalt der Tabelle in der Funktion zu verändern sodass ich z.B den Kopfnamen selbst bestimmen kann ?
 
Bin unsicher, ob ich die Frage richtig verstanden habe. Aber Zelleninhalte kann man ganz einfach mit .innerHTML verändern.
Ich habe dein Beispiel eh nicht verstanden, weil das nur abwechselnd arbeitet. Und warum du überhaupt clonst weiß ich nicht. Man kann Zellen und Zeilen auch dynamisch erzeugen und muss nicht clonen.
 
Ein paar Kommentare zum Code:
  • einer Funktion die ID eines Elements zu übergeben macht die Funktion nur unflexibel um man verteilt in seinem HTML unnötige IDs. Übergib' so einer Funktion doch einfach direkt die Node, auf der du arbeiten willst.
  • der Vergleich von table mit undefined enthält zwei Fehler, die sich gegenseitig aufheben. document.getElementById() gibt null zurück, wenn das Element nicht gefunden wurde. Aber da du den typunsicheren Vergleich == verwendet hast. Castet das zufällig richtig. Dieser Vergleich kann aber in älteren Browsern in die Hose gehen, da dort die globale Variable undefined überschrieben werden kann.
    Aber der komplette Vergleich ist unnötig, da du einfach if (table) verwenden kannst.
  • ich finde es ja immer etwas nervig, wenn man nur die letzte Spalte entfernen kann... ich würde da auch immer gerne eine Spalte mitten drin enfernen können

Code: 
<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<table rules="all" style="border:1px solid black;border-collapse:separate;">
			<thead>
				<tr></tr>
			</thead>
			<tr></tr>
			<tr></tr>
			<tr></tr>
		</table>
		Column header: <input id="header">
		<button id="add">add</button>
		<script>
		(function(){
			var addButton = document.getElementById("add");
			var headerInput = document.getElementById("header");
			var table = document.getElementsByTagName("table")[0];
			addButton.onclick = function(){
				addColumn(table, headerInput.value);
			};
		}());
		
		function getColumnIndex(cell){
			var row = cell.parentNode;
			for (var i = 0; i < row.cells.length; i += 1){
				if (row.cells[i] === cell){
					return i;
				}
			}
			return -1;
		}
		
		function addColumn(table, header){
			var rowNb = table.rows.length;

			var headerCell = document.createElement("th");
			headerCell.appendChild(document.createTextNode(header));
			table.rows[0].appendChild(headerCell);

			for (var i = 1; i < rowNb - 1; i += 1){
				var cell = document.createElement("td");
				cell.innerHTML = Math.random();
				table.rows[i].appendChild(cell);
			}

			var removeCell = document.createElement("td");
			var removeButton = document.createElement("button");
			removeButton.innerHTML = "remove";
			removeButton.onclick = function(){
				removeColumn(table, removeCell);
			};
			removeCell.appendChild(removeButton);
			table.rows[rowNb - 1].appendChild(removeCell);
		}
		function removeColumn(table, cell){
			var columnIdx = getColumnIndex(cell);
			for(var i = 0; i < table.rows.length; i += 1){
				var row = table.rows[i];
				row.removeChild(row.cells[columnIdx]);
			}
		}
		</script>
	</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben