Zeile mit JS einfügen

Ich bau an ein JS Script, was mir eine Zeile einfügt (klappt mitunter auch).

Siehe hier:
http://jsfiddle.net/28spv9jj/1/

3 Probleme habe ich hier aber noch:

=> + Button fügt eine Zeile am Ende hinzu. Ziel => in die nachfolgende Zeile einfügen, wo man drauf gedrückt hat
=> - Button soll gezielt die Zeile löschen, wo man drauf gedrückt hat
=> + Button müsste eine fortlaufenden Key erzeugen. (seiten[i][aktiv])

Letzteres ist aktuell mein größtes Problem.
1: Ein Submit überschreibt natürlich jede Zeile... ist ja alles seiten[aktiv]
2: Dann könnte ich vvlt. auch einen eindeutigen Namen haben den ich ansprechen kann... für's löschen.

Kann einer Helfen ?

P.s. Gern auch gegen $$$ (Nach Absprache)

Please also mark the comments that contributed to the solution of the article

Content-Key: 258276

Url: https://administrator.de/contentid/258276

Printed on: April 16, 2024 at 06:04 o'clock

3 Comments

Latest comment

Hallo lord-icon,
hier eine Lösung für dein Beispiel:

<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(e) {
    //Aktion für alle Add-Buttons
	$('#dataTable .btnAdd').click(function(){  
		//referenz zur aktuellen Zeile holen
		var current_row = $(this).parent().parent();
		// node duplizieren inklusive event-handler
		var new_row = $(current_row).clone(true);
		// Input für das neue Element leeren
		$(new_row).find("input.itm_input").val('');  
		// neue Zeile hinter die aktuelle hängen
		$(new_row).insertAfter(current_row);
		//Nummerierung erneuern
		reNumberNodes();
	});
	//Aktion für alle Delete-Buttons
	$('#dataTable .btnDelete').click(function(){  
		// wenn die Anzahl der Zeilen > 1 erlaube zu löschen
		if ($('#dataTable tr').length > 1){  
			$(this).parent().parent().remove();
			reNumberNodes();
		}else{
			alert('Das letzte Element kann nicht gelöscht werden');  
		}
	});
});

function reNumberNodes(){
	$("#dataTable .itm_checkbox").each(function(index, element) {  
        $(element).attr('name','seiten['+ index + '][aktiv]');  
    });
	$("#dataTable .itm_input").each(function(index, element) {  
        $(element).attr('name','seiten['+ index + '][value]');  
    });
}
</script>
</head>
<body>

<form method="POST">              
            
<table id="dataTable" width="100%"  border="0">  
    <tr>
        <td><input class="itm_checkbox" value="" type="checkbox" name="seiten[aktiv]"/ checked="checked"></td>  
        <td><input class="itm_input" type="text" style="width: 500px" name="seiten[value]"/></td>  
        <td>
          <img class="btnAdd" src="http://findicons.com/files/icons/1156/fugue/16/plus_button.png">  
          <img class="btnDelete" src="http://findicons.com/files/icons/1156/fugue/16/minus_button.png">  
        </td>
        <td>

        </td>
    </tr>
</table>

<input type="submit" name="Submit" value="Daten jetzt Speichern" />  
</form>    
</body>
</html>

Grüße Uwe

Hallo Uwe,

Frameworks darf ich leider nicht verwenden. Sry das ich das nicht erwähnte.
Dachte mit meinen Code wäre das ersichtlich (das keine eingesetzt werden).

Nach Stunden lesen und Probieren hab ich das eine oder andere Problem auch schon behoben.
Sprich: Sauber wegspeichern kann ich es mitunter.

Nur das zeilengenaue einfügen gelingt mir nicht.

Aktueller Stand: http://jsfiddle.net/3h2shhL9/2/

Weiß einer Rat, welcher der einfachste Weg wäre... und wie ich den evtl. hinbekomme ?

Zitat von @lord-icon:
Frameworks darf ich leider nicht verwenden. Sry das ich das nicht erwähnte.

auch kein Problem:
http://jsfiddle.net/3h2shhL9/4/

Schönen restlichen 4 Advent

Grüße Uwe

German solved Question JavaScript Development