lord-icon
Goto Top

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)

Content-Key: 258276

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

Ausgedruckt am: 28.03.2024 um 09:03 Uhr

Mitglied: colinardo
Lösung colinardo 21.12.2014 aktualisiert um 17:37:46 Uhr
Goto Top
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
Mitglied: lord-icon
lord-icon 21.12.2014 aktualisiert um 16:58:25 Uhr
Goto Top
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 ?
Mitglied: colinardo
colinardo 21.12.2014 aktualisiert um 19:01:32 Uhr
Goto Top
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 face-smile
Grüße Uwe