Tabellenzeile hinzufügen

timpanse · 13. September 2010

Ok, ich bin ein Stück weiter.
Auf Klick auf "richtig nummerieren" soll nun function helga aufgerufen werden und richtig nummeriert werden. Trotzdem nummeriert er aber neue Zeile zwischendrinne nicht der Reihenfolge entsprechend richtig sondern so wie eingefügt wurden.

Funktion "helga" durchläuft doch aber bei jedem Klick alle reihen, ermittelt die Reihenanzahl und vergibt dann fortlaufend die Nr.

Verstehe ich nicht!
Muss doch was mit getElementById("test"+i) zu tun haben, oder?
Aber wie soll ich sonst die Felder ansprechen?

Code:

<html>
<head>
<style type="text/css"><!--
.button_add_del {cursor:pointer;}
--></style>
<script type="text/javascript">
//<![CDATA[

function newRow(objSrc)
{
  	var objTBody = document.getElementById("dokument").getElementsByTagName("tbody")[0];
 	if(typeof objSrc=="undefined")
		{
   			var objTR = objTBody.insertRow(objTBody.rows.length);
		}
	else
		{
    			var objHelpTR = objSrc.parentNode;
    			while(objHelpTR && (objHelpTR.nodeName.toLowerCase()!="tr"))
				{
      					objHelpTR = objHelpTR.parentNode;
    				}
			if(!objHelpTR) return;
    			var objTR = document.createElement("tr");
    			objHelpTR.parentNode.insertBefore(objTR, objHelpTR);
		}
  
  	var einheit = document.createElement('select');
		theOption1=document.createElement("OPTION");
		theText1=document.createTextNode("cm");
		theOption1.appendChild(theText1);
		theOption1.setAttribute("value","cm");
		einheit.appendChild(theOption1);
		theOption2=document.createElement("OPTION");
		theText2=document.createTextNode("g");
		theOption2.appendChild(theText2);
		theOption2.setAttribute("value","g");
		einheit.appendChild(theOption2);
        	einheit.setAttribute("name", "einheit"+objTBody.rows.length);
        	einheit.setAttribute("id", "einheit"+objTBody.rows.length);
        	einheit.setAttribute("class", "textfeld");
    	var pos = document.createElement('input');
        	pos.setAttribute("type", "text");
        	pos.setAttribute("name", "pos"+objTBody.rows.length);
        	pos.setAttribute("id", "pos"+objTBody.rows.length);
        	pos.setAttribute("size", "3");
        	pos.setAttribute("class", "textfeld");
    	var menge = document.createElement('input');
        	menge.setAttribute("type", "text");
        	menge.setAttribute("name", "menge"+objTBody.rows.length);
        	menge.setAttribute("id", "menge"+objTBody.rows.length);
        	menge.setAttribute("size", "2");
        	menge.setAttribute("class", "textfeld");
    	var ep = document.createElement('input');
        	ep.setAttribute("type", "text");
        	ep.setAttribute("name", "ep"+objTBody.rows.length);
        	ep.setAttribute("id", "ep"+objTBody.rows.length);
        	ep.setAttribute("size", "6");
        	ep.setAttribute("class", "textfeld");
    	var kurztext = document.createElement('textarea');
        	kurztext.setAttribute("name", "kurztext"+objTBody.rows.length);
        	kurztext.setAttribute("id", "kurztext"+objTBody.rows.length);
        	kurztext.setAttribute("cols", "60");
        	kurztext.setAttribute("rows", "2");
        	kurztext.setAttribute("class", "textfeld");
	var addrow_button = document.createElement('img');
		addrow_button.setAttribute("src", "image/add_above.png");
		addrow_button.setAttribute("title", "Neue Position darüber einfügen");
		addrow_button.setAttribute("onclick", "javascript:newRow(this);");
		addrow_button.setAttribute("height", "35");
		addrow_button.setAttribute("width", "35");
		addrow_button.setAttribute("border", "0");
		addrow_button.setAttribute("class", "button_add_del");
	var delrow_button = document.createElement('img');
		delrow_button.setAttribute("src", "image/del_above.png");
		delrow_button.setAttribute("title", "Diese Position entfernen");
		delrow_button.setAttribute("onclick", "javascript:removeRow(this);");
		delrow_button.setAttribute("height", "35");
		delrow_button.setAttribute("width", "35");
		delrow_button.setAttribute("border", "0");
		delrow_button.setAttribute("class", "button_add_del");
	var test_button = document.createElement('input');
		test_button.setAttribute("id", "test"+objTBody.rows.length);
 	var id_button = document.createElement('input');
      		id_button.setAttribute("name", "anzahl");
      		id_button.setAttribute("value", +objTBody.rows.length);
  	
	var objTD = objTR.insertCell(objTR.cells.length);
  	objTD.appendChild(id_button);

  	objTD = objTR.insertCell(objTR.cells.length);
  	objTD.appendChild(addrow_button);
  	objTD = objTR.insertCell(objTR.cells.length);
  	objTD.appendChild(delrow_button);
  
  	objTD = objTR.insertCell(objTR.cells.length);
  	objTD.appendChild(pos);
  	objTD.appendChild(menge);
  	objTD.appendChild(einheit);

  	objTD = objTR.insertCell(objTR.cells.length);
  	objTD.appendChild(kurztext);
 
  	objTD = objTR.insertCell(objTR.cells.length);
  	objTD.appendChild(ep);

  	objTD = objTR.insertCell(objTR.cells.length);
  	objTD.appendChild(test_button);

	//helga();
}

function removeRow(objSrc)
{
  	var objTBody = document.getElementById("dokument").getElementsByTagName("tbody")[0];
	if(typeof objSrc=="undefined")
		{
    			if(objTBody.rows.length > 0)
			objTBody.deleteRow(objTBody.rows.length-1);  
  		}
	else
		{
			var objTR = objSrc.parentNode;
			while(objTR && (objTR.nodeName.toLowerCase()!="tr"))
				{
      					objTR = objTR.parentNode;
				}
    			if(!objTR) return; 
			objTR.parentNode.removeChild(objTR);
  		}
}

function helga()
{
	var objTBody = document.getElementById("dokument").getElementsByTagName("tbody")[0];
	for(var i=1; i<=objTBody.rows.length; i++)
		{
			document.getElementById("test"+i).value = "Nr.: "+i;
		}
}

//]]>
</script>
</head>
<body>
<a href=# onclick="javascript:helga();">richtig Nummerieren</a><br><br>
<img src="image/add.png" title="Neue Position hinzufügen" onClick="javascript:newRow();" height="35" width="35" border="0" class="button_add_del">
<img src="image/del.png" title="Letzte Position entfernen" onClick="javascript:removeRow();" height="35" width="35" border="0" class="button_add_del">
<form action="auswertung.php">
<table id="dokument" border="1">

  <tbody></tbody>

</table>
<input type="submit" value="senden">
</form>
</body>
</html>

Quaese · 15. September 2010

Hi,

ich beziehe mich mit meinen Ausführungen auf mein letztes Beispiel:

Du könntest alle Tabellenzeilen durchlaufen und mit neuen IDs versehen.

Die Input-Elemente innerhalb der Zeile ermittelst du über getElementsByTagName. Das resultierende Array durchläufst du und vergibst den Input-Elementen neue IDs - z.B. der Form "ID_zeilennummer_inputnummer".

Beispiel:

Code:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
//<![CDATA[
/*
 * Funktion zum Einfügen einer neuen Zeile
 * In die letzten beiden Zellen werden Buttons zum Einfügen einer Zeile davor und zum Entfernen der aktuellen
 * Zeile eingefügt.
 *
 * i)  Wird kein Argument übergeben, so wird die neue Zeile an das Ende der Tabelle angehängt
 * ii) Wird ein auslösendes Element im Argument übergeben, so wird dessen Eltern-Tabellenzeile ermittelt
 *     und vor diese eine neue Zeile eingehängt
 */
function newRow(objSrc){
  var objTBody = document.getElementById("table_id").getElementsByTagName("tbody")[0];

  // Falls kein auslösendes Objekt übergeben wurde
  if(typeof objSrc=="undefined"){
    var objTR = objTBody.insertRow(objTBody.rows.length);
  }else{
    // Eltern-Tabellenzeile des auslösenden Elements ermitteln
    var objHelpTR = objSrc.parentNode;
    while(objHelpTR && (objHelpTR.nodeName.toLowerCase()!="tr")){
      objHelpTR = objHelpTR.parentNode;
    }
    if(!objHelpTR) return;

    // Neue Zeile generieren
    var objTR = document.createElement("tr");
    // Neue Zeile vor aktueller Zeile einfügen
    objHelpTR.parentNode.insertBefore(objTR, objHelpTR);

  }

  // Erste Zelle
  var objTD = objTR.insertCell(objTR.cells.length);
  objTD.innerHTML = objTBody.rows.length;
  var objInput = document.createElement("input");
  objInput.type = "text";
  objInput.value = objTBody.rows.length;
  objTD.appendChild(objInput);
  objInput = document.createElement("input");
  objInput.type = "text";
  objInput.value = objTBody.rows.length;
  objTD.appendChild(objInput);

  // Zweite Zelle mit Button "Zeile davor einfügen"
  objTD = objTR.insertCell(objTR.cells.length);
  var objBtn = document.createElement("button");
  objTD.appendChild(objBtn);
  objBtn.innerHTML = "Zeile davor einfügen";
  // Button mit onclick-Handler versehen
  objBtn.onclick = function(){
    // Funktion zum Einfügen einer neuen Zeile mit auslösendem Element aufrufen
    newRow(this);
  }

  // Dritte Zelle mit Button "Zeile löschen"
  objTD = objTR.insertCell(objTR.cells.length);
  objBtn = document.createElement("button");
  objTD.appendChild(objBtn);
  objBtn.innerHTML = "Zeile löschen";
  // Button mit onclick-Handler versehen
  objBtn.onclick = function(){
    // Funktion zum Entfernen einer Zeile mit auslösendem Element aufrufen
    removeRow(this);
  }
  reorganizeIDs(objTBody);
}

/*
 * Funktion zum Entfernen einer Zeile
 *
 * i)  Wird kein Argument übergeben, so wird die letzte Zeile der Tabelle gelöscht
 * ii) Wird ein auslösendes Element im Argument übergeben, so wird dessen Eltern-Tabellenzeile ermittelt
 *     und diese aus der Tabelle entfernt
 */
function removeRow(objSrc){
  var objTBody = document.getElementById("table_id").getElementsByTagName("tbody")[0];

  // Falls kein auslösendes Objekt übergeben wurde -> es wird die letzte Zeile entfernt
  if(typeof objSrc=="undefined"){
    // Falls mindestens eine Zeile existiert
    if(objTBody.rows.length > 0)
      objTBody.deleteRow(objTBody.rows.length-1);
  }else{
    // Eltern-Tabellenzeile des auslösenden Elements ermitteln
    var objTR = objSrc.parentNode;
    // Solange es sich nicht um eine Tabellenzelle handelt
    while(objTR && (objTR.nodeName.toLowerCase()!="tr")){
      objTR = objTR.parentNode;
    }
    if(!objTR) return;
    // Zeile aus Tabelle entfernen
    objTR.parentNode.removeChild(objTR);
    reorganizeIDs(objTBody);
  }
}

function reorganizeIDs(objTBody){
  // IDs neu schreiben
  for(var i=0; i<objTBody.rows.length; i++){
    objTBody.rows[i].id = "id_" + i;
    // Alle Inputs der Tabellenzeile ermitteln
    var arrInputs = objTBody.rows[i].getElementsByTagName("input");
    // Alle Inputs durchlaufen
    for(var j=0; j<arrInputs.length; j++){
      arrInputs[j].id = "id_" + i + "_" + j;
    }
  }
}
//]]>
</script>
</head>
<body>
<button onclick="newRow();">Zeile einfügen</button>
<button onclick="removeRow();">Zeile entfernen</button>
<table id="table_id">
  <tbody></tbody>
  <tbody><tr><td>leer</td><td>leer</td><td>leer</td></tr></tbody>
</table>
</body>
</html>

Mit dem Zuweisen des onclick-Handlers über die Methode setAttribute solltest du vorsichtig sein, da der IE Probleme damit hat.

Ciao
Quaese

timpanse · 15. September 2010

Perfekt!

Ein Stück komfortabler wäre es allerdings die Textfelder per Name anzusprechen, da es ja verschiedene gibt.

Code:

	for(var i=0; i<objTBody.rows.length; i++)
		{
			var input = objTBody.rows[i].getElementsByName("menge");
			for(var j=0; j<input.length; j++)
				{
					input[j].value = "input_" + i + "_" + j;
				}
		}

klappt aber nicht. Geht das nur mit getElementsByTagName?

SpiceLab · 15. September 2010

Schau mal zum Vergleich deines Codeschnipsels hier: getElementsByName().

timpanse · 15. September 2010

Das spricht nur 1 bestimmtes an.

...ab und zu sollte ich aufhören dumme Fragen zu stellen und erst mal lesen.

Gibts es den überhaupt einen Weg zu sagen z.b. pack alle textfelder mit Attr. name="menge" in ein Array?

Quaese · 16. September 2010

Hi,

getElementsByName ist eine Methode des document-Objekts, nicht des node-Objekts. Somit ist es nicht möglich, die Methode im Kontext der Tabellenzeilen aufzurufen.

Vorstellbar wäre es, alle Elemente im onload-Event mit einer eigenen Methode zu versehen, die alle Kindknoten ermittelt, die ein gefordertes name-Attribut enthalten. Die gefundenen Elemente könnten in einem Array zurück gegeben werden.

Beispiel:

Code:

var fnLoadHandler = function(){
  var arrAll = (document.all)? document.all : document.getElementsByTagName("*");

  for(var i=0; i<arrAll.length; i++){
    arrAll[i].getElementsByName = function(strName){
      var arrAll = (this.all)? this.all : this.getElementsByTagName("*");
      var arrRet = [];

      for(var i=0; i<arrAll.length; i++){
        if(arrAll[i].attributes.getNamedItem("name") != null){
          if(arrAll[i].attributes.getNamedItem("name").value == strName){
            arrRet[arrRet.length] = arrAll[i];
          }
        }
      }

      return arrRet;
    }
  }
}


if(window.addEventListener){
  window.addEventListener('load', fnLoadHandler, false);
}else if(window.attachEvent){
  window.attachEvent("onload", fnLoadHandler);
}else{
  var fnLoad = window.onload;
  window.onload = function(){
    fnLoadHandler();
    fnLoad();
  }
}

Verwendet wird die Methode wie ihr Äquivalent des document-Objekts.

Ciao
Quaese

Tabellenzeile hinzufügen

timpanse

Grünschnabel

Quaese

Moderator

timpanse

Grünschnabel

SpiceLab

ZENmechanic

timpanse

Grünschnabel

Quaese

Moderator

Neue Beiträge