Tabellen Klon entfernen

[dreambaser]

Hallo Leute,

ich habe hier ein Problem mit einer Funktion, wo ich einfach nicht dahinter steige, wieso das passiert.

Es wird durch einen Button die Tabelle geklont. Das funktioniert soweit auch, allerdings wird dann immer das Textfeld wieder mit den alten Werten gefüllt. Das ist mein ersten Problem.

Zum 2. habe ich eine Funktion, die den Tabellenklon wieder entfernt. Das funktioniert soweit auch, allerdings ist es damit möglich, die gesamte Tabelle zu löschen. Dabei will ich aber nur die neue Tabellenzeile löschen.

Hier mal die Funktionen:

function addR(row){
  var newRow = row.cloneNode(true);
  row.parentNode.appendChild(newRow);
  
}
function delR(row) {
    row.parentNode.removeChild(row);
};

und so rufe ich das ganze auf:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
             <tr class="dataTableRow" onMouseOver="rowOverEffect(this)" onMouseOut="rowOutEffect(this)">
                    <td width="166" height="30" valign="middle" align="left" class="right_line_bot"><span class="smalltext">&nbsp;&nbsp;<?php echo 'Restmüll';?></span></td>
                           <td width="147" valign="middle" align="right" class="right_line_bot">&nbsp;
                                 <select class="smalltext" name="mgb_r[]">
                                   <option value="rm1">60 Liter</option>
                                   <option value="rm2">120 Liter</option>
                                   <option value="rm3">240 Liter</option>
                                   <option value="rm4">660 Liter</option>
                                   <option value="rm5">1100 Liter</option>
                                  </select>&nbsp;&nbsp;</td>
                       <td width="72" valign="middle" align="center" class="right_line_bot">
                                 <input type="textfield" class="textfield_veryshort" value="<?php echo formquest('mgb_rm[]'); ?>" onFocus="this.value='';" name="mgb_rm[]"></td>
                       <td width="154" valign="middle" class="right_line_bot" align="center"><input type="textfield" class="textfield_veryshort" value="<?php echo formquest('epw_rm[]'); ?>" onFocus="this.value='';" name="epw_rm[]"></td>
                      <td width="50" valign="middle" align="right" class="bottom_line"><input name="button" class="submit_sm" type="button" id="inputbuttonplus" value="+" onclick='return addR(this.parentNode.parentNode)'><input name="button" class="submit_sm" type="button" id="inputbuttonminus" value="-" onclick='return delR(this.parentNode.parentNode)'>
                                                  &nbsp;&nbsp;</td>
                   </tr>
 </table>

Ich muss dazu sagen, das Javascript überhaupt nicht meine Stärke ist. Bin mehr in PHP und Flash bewandert.

Kann mir vielleicht jemand helfen

mfg
Dreambaser

 

[Quaese]

Hi,

zum ersten Problem:
Erstelle mit Hilfe der Methode getElementsByTagName ein Array mit allen input-Elementen der neuen Zeile. Dieses Array durchläufst du, prüfst, ob es sich um ein Textfeld handelt und entfernst den Inhalt.

Zum zweiten Problem:
Du könntest in der Lösch-Routine prüfen, wieviele Zeilen sich aktuell in der Tabelle befinden. Sind es weniger als zwei, unterbindest du das Löschen indem die Funktion verlassen wird.

Beispiel:

function addR(row){
  var newRow = row.cloneNode(true);

  // Array mit allen Inputelementen in der neuen Zeile erstellen
  var arrInput = newRow.getElementsByTagName("input");
  // Array durchlaufen
  for(var i=0; i<arrInput.length; i++){
    // Falls es sich um ein Textfeld handelt -> Inhalt löschen
    if(arrInput[i].type == "text")
      arrInput[i].value = "";
  }

  row.parentNode.appendChild(newRow);
}
function delR(row) {
  var objTable = row.parentNode;

  // Tabellenobjekt ermitteln
  while(objTable.nodeName.toLowerCase() != "table"){
    objTable = objTable.parentNode;
  }

  // Falls nur eine Zeile enthalten ist -> Funktion ohne Löschen verlassen
  if(objTable.rows.length < 2) return false;

  row.parentNode.removeChild(row);
}

Ciao
Quaese