✔ Anzahl an Klonen begrenzen (clonenode)

G

Gabriel2001

Grünschnabel
Moin,

für ein aktuelles Projekt muß ich mich mit Javascript auseinandersetzen, wobei mir ein Anhaltspunkt fehlt, um folgendes Problem zu lösen. Da ich in Javascript nicht sonderlich fit bin, da ich eher mit Datenbanken und php arbeite, hoffe ich, dass mir jemand von euch helfen kann.

Folgender Programmcode (den ich im Netz gefunden und angepasst habe) stellt dem User eine Tabelle zur Verfügung, wobei er via gedrücktem Submit-Button immer eine neue Tabellenzeile hinzufügen/löschen kann, in welche er Formulardaten einträgt. Nun möchte ich, dass er maximal 7 Zeilen anlegen kann, weiß aber nicht wie ich das bewerkstelligen kann. Es wäre nett, wenn mir jemand einen Fingerzeig in die richtige Richtung geben könnte.

Code: 
<script type="text/javascript">
<!--

function clone_this(button, objid){
    var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
    button.parentNode.insertBefore(clone_me, button);
}
function remove_this(objLink)
{
  objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
}
//-->
</script>

Code: 
    <div>
<div id="new_passage" style="visibility:hidden ; display:none"><table name="cloneTable" width="1000" class="borderline" border="0"  align="center">
    <tr>
      <td width="107"><label>
       <input name="anzahl[]" type="text" id="anzahl" size="10"/>
      </label></td>
      <td width="180"><label>
        <select name="verpackung[]" id="verpackung">
          <option>Europalette</option>
          <option>Einwegpalette</option>
          <option>Gitterbox</option>
          <option>Colli</option>
          <option>IBC</option>
          <option>Verschlag</option>
          <option>Kiste</option>
          <option>Karton</option>
        </select>
      </label></td>
      <td width="125"><label>
        <input name="ihrzeichen[]" type="text" id="ihrzeichen" size="19" />
      </label></td>
      <td width="140"><label>
        <input type="text" name="inhalt[]" id="inhalt" size="20"/>
      </label></td>
      <td width="98"><label>
        <input name="gewicht[]" type="text" id="gewicht" size="10" />
      </label></td>
<td width="165"><label><input value="Löschen" onclick="javascript:remove_this(this); return false;" type="button"></input></td>
    </tr>
</table>
</div>
</div>
    <div>
<div id="new_passage2"><table name="cloneTable" width="1000" class="borderline" border="0"  align="center">
    <tr>
      <td width="107"><label>
       <input name="anzahl[]" type="text" id="anzahl" size="10"/>
      </label></td>
      <td width="180"><label>
        <select name="verpackung[]" id="verpackung">
          <option>Europalette</option>
          <option>Einwegpalette</option>
          <option>Gitterbox</option>
          <option>Colli</option>
          <option>IBC</option>
          <option>Verschlag</option>
          <option>Kiste</option>
          <option>Karton</option>
        </select>
      </label></td>
      <td width="125"><label>
        <input name="ihrzeichen[]" type="text" id="ihrzeichen" size="19" />
      </label></td>
      <td width="140"><label>
        <input type="text" name="inhalt[]" id="inhalt" size="20"/>
      </label></td>
      <td width="98"><label>
        <input name="gewicht[]" type="text" id="gewicht" size="10" />
      </label></td>
<td width="165"><label><input value="Löschen" onclick="javascript:remove_this(this); return false;" type="button"></input></td>
    </tr>
</table>
</div>
</div>
<td>
<tr>
<div align="center">
  <input value="Neue Sendungszeile einfügen" onclick="javascript:clone_this(this, 'new_passage');" type="button"></input>
</div></td></tr>
<table>
 
Hi,

ermittel die Anzahl der table-Elemente innerhalb des Elternknotens des Buttons. Solange diese kleiner als Sechs ist, können weitere Tabellen hinzugefügt werden.

Beispiel:
Code: 
function clone_this(button, objid){
  if(button.parentNode.getElementsByTagName("table").length < 6){
    var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
    button.parentNode.insertBefore(clone_me, button);
  }
}
Ciao
Quaese
 
Hi,
super vielen Dank für deinen Lösungsweg und den gleich mitgelieferten Codevorschlag, an die table Elemente habe ich gar nicht gedacht. Er funktioniert soweit auch sehr gut. Leider habe ich daraus resultierend nun ein Folgeproblem ;-)...Die Table Elemente werden korrekt nach oben gezählt, wenn ich nun aber mit

Code: 
function remove_this(objLink)
{
  objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
}

einen Table wieder optisch lösche, so werden die Table Elemente scheinbar weiter hochgezählt, so dass es dazu kommt, dass ich nachher z.b. zwei sichtbare tables habe, aber keinen neuen mehr anlegen kann, weil er wahrscheinlich "intern" schon bis 5 gezählt hat. Hast du nen Lösungstipp?
 
Hi,

du löschst nicht das table-Element aus dem Dokument, sondern den tbody.

Besser du hangelst dich im Dokumentenbaum nach oben, bis du das zugehörige table-Element findest. Von diesem ausgehend, kannst du das Entfernen anstossen.

Beispiel:
Code: 
function remove_this(objLink){
  var objParent = objLink.parentNode;

  // Dokumentenbaum nach oben "hangeln" bis table-Element gefunden wird
  while(objParent.nodeName.toLowerCase() != "table")
    objParent = objParent.parentNode;

  // table-Element entfernen
  objParent.parentNode.removeChild(objParent);
}
Ciao
Quaese
 
Huhu,
vielen Dank für deine promte Antwort, der Code klappt bestens. Auf die Lösung wäre ich nie gekommen. Respekt und Hut ab.
Bis bald
Gabriel
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück