Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

gelöst HTML JavaScript dynamische Elemente hinzufügen - Tabelle - weitere Felder - Formular - Zeilen - Zellen

Mitglied: Midivirus

Midivirus (Level 2) - Jetzt verbinden

03.08.2011, aktualisiert 05.08.2011, 14181 Aufrufe, 6 Kommentare

Guten Morgen,

da ich aktuell viel mit JS experimentiere und seit langem eine Lösung für dies suche,
hab ich über Suchmaschinen mal folgende Beispiele gefunden, die funktionieren, ich aber dank der Kenntnisse, keine Erweiterung vornehmen kann.

01.
<HTML> 
02.
<HEAD> 
03.
<script src="jquery-1.2.1.pack.js" type="text/javascript"></script> 
04.
<script> 
05.
$(document).ready(function(){  
06.
 
07.
	$('.mehr').click(function(){ 
08.
		$(".submit").before('<TR><TD>Spalte1 mit JS</TD><TD>Spalte2 mit JS</TD></TR>'); 
09.
	}) 
10.
 
11.
});  
12.
</script> 
13.
</HEAD> 
14.
<BODY> 
15.
<TABLE border> 
16.
	<TR> 
17.
		<TD>spalte1</TD><TD>Spalte2</TD> 
18.
	</TR> 
19.
	<TR> 
20.
		<TD><a href="#" class="mehr">Mehr!</a></TD><TD><input type="submit" class="submit" value="Senden" /></TD> 
21.
	</TR> 
22.
</TABLE> 
23.
 
24.
<XMP> 
25.
<?PHP 
26.
print_r($_POST); 
27.
?> 
28.
</XMP> 
29.
</BODY> 
30.
</HTML> 
31.
 
Siehe hier: http://jsfiddle.net/3rwRH/ (unterer Teil des Beispiels)
http://jsfiddle.net/t5Ayg/ (oberer Teil des Beispiels)

Das obere Skript war ursprünglich dafür gedacht, mehrere Dateien hochzuladen.
Bei dem zweiten werden einfach immer ein Input-Feld angehängt.

Ich suche also folgendes:
Es ist eine Tabelle gegeben, diese hat 5 Spalten und erstmal eine Zeile.
Möchte der Benutzer jetzt aber in dem Auftrag mehr als eine Position haben, könnte man weitere Zeilen über JS nachladen / generieren.

Alternativ hätte ich jetzt gedacht, dass vorher gefragt wird, wie viele Zeilen benötigt werden, diese dann erzeugt werden.
Die zweite Möglichkeit find ich aber nicht so WEB 2.0 freundlich. Man denke jetzt einfach mal an die GUI von GMail! (...)

Vielleicht weiß jemand, wie es klappt (...)

Grüße
Euer Midivirus

Quellen:
http://www.mediengestalter.info/forum/10/javascript-neue-formularfelder ...
Mitglied: EvilMoe
03.08.2011 um 11:01 Uhr
Hallo,

wir hatten ja schonmal das vergnüen ;)
Als erstes würde ich mich entscheiden was du nutzt, du mischst dort Jquery mit "reinem" javascript.
01.
var y = document.getElementsByTagName('input'); 
Die Zeile z.B. kannste auch mit Jquery wieder verkürzen. Funktioniert so war auch aber es wird dadurch extrem unübersichtlich.

Du möchtest also einen Link wenn man drauf klickt ein weiteres Input element erstellen?
Kein Problem. Ein Beispiel haste doch schon gefunden.


Ich habe noch ein einfaches Beispiel erstellt, vielleicht kommst du damit besser zurecht (form element fehlt, sollte ja schnell gehen;)).
Nach den klick auf "Mehr!" erstelle ich vor dem submit Button einfach ein neues Input Element.

01.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
02.
<html xmlns="http://www.w3.org/1999/xhtml"> 
03.
<head> 
04.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
05.
<title>Test</title> 
06.
<script  type="text/javascript" src="jquery.js" ></script> 
07.
<script> 
08.
$(document).ready(function(){  
09.
 
10.
	$('.mehr').click(function(){ 
11.
		$(".submit").before('<br/><input type="text" class="neues_input" value="neues_input" />'); 
12.
	}) 
13.
 
14.
});  
15.
</script> 
16.
</head> 
17.
<body> 
18.
<a href="#" class="mehr">Mehr!</a> 
19.
 
20.
 
21.
<div> 
22.
 
23.
 
24.
    <input type="text" class="first_input" value="Erstes Input" /> 
25.
     
26.
     
27.
    <input type="submit" class="submit" value="Senden" /> 
28.
</div> 
29.
 
30.
</body> 
31.
</html>
Bitte warten ..
Mitglied: Midivirus
04.08.2011 um 10:43 Uhr
Wir grüßen dich.

Nun, ich es zusammenschmeiße liegt einfach daran, das ich mir das mit Google alles zusammensuche und ausprobiere, etwas Zeit dazu nehme und ein Ergebnis habe.
Dann nehm ich noch etwas Intelligenz, wie was heißen könnte. Hab damals mal Java lernen müssen, daher kann ich mit der Syntax etwas anfangen.

Aber mehr auch nicht. Bin eher für das einfache PHP, da kann man auch viel machen, ohne der Nutzer es mitbekommt, aber klar: mit AJAX muss man sich damit beschäfitgen. Soviel vorweg.

Hab den Code oben mal geändert, wie er jetzt ist.
Die Ausgabe stört mich noch etwas.
dd502226637bef30e4b1e76e8784d07c - Klicke auf das Bild, um es zu vergrößern

Dort wird einfach die Zeile immer vor dem Input eingefügt.

Du möchtest also einen Link wenn man drauf klickt ein weiteres Input element erstellen?
Kein Problem. Ein Beispiel haste doch schon gefunden.

Ziel soll es sein, so eine Tabelle zu haben, mit diversen Spalten und mit Klick wird einfach eine weitere Zeile hinzugefügt.
Ich nenn es jetzt mal nicht duplizieren, weil ich die HTML-Ausgabe ncoh etwas individuell lassen möchte.

Nach den klick auf "Mehr!" erstelle ich vor dem submit Button einfach ein neues Input Element.


Grüße
Midivirus

Und merci für deine Mühe, ist nicht selbstverständlich
Bitte warten ..
Mitglied: EvilMoe
04.08.2011 um 23:20 Uhr
Hallo,

das geht auch recht einfach.

01.
<script> 
02.
$(document).ready(function(){  
03.
 
04.
	$('.mehr').click(function(){ 
05.
		$("td:last").after('<td>Neue Zeile</td>'); 
06.
	}) 
07.
 
08.
});  
09.
</script> 
10.
 
11.
 
Ungetestet
Bitte warten ..
Mitglied: Midivirus
05.08.2011 um 08:08 Uhr
Hossa

Okay, macht daneben immer eine neue Zelle dran.

Ziel bleibt es noch immer:
Eine ganze Zeile hinzufügen.

Beispiel an dem Bild oben:
01.
	$('.mehr').click(function(){ 
02.
		$("tr:last").after('<TR>'); 
03.
		$("td:last").after('<td>Neue Zeile1</td>'); 
04.
		$("td:last").after('<td>Neue Zeile2</td>'); 
05.
		$("tr:last").after('</TR>'); 
06.
	}) 
07.
 
08.
<TABLE> 
09.
	<TR> 
10.
		<TD>Spalte1</TD><TD>Spalte2</TD> 
11.
	</TR> 
12.
<!-- JS Zeilen ... --> 
13.
	<TR> 
14.
		<TD><a href="#" class="mehr">Mehr!</a></TD><TD><input type="submit" class="submit" value="Senden" /></TD> 
15.
	</TR> 
16.
</TABLE>
Mit deinem Code bekomme ich rechts neben dem Button immer eine Zelle dazu.
Bei meiner Editierung halt zwei ... !

Aber ich hab in einem Tutorial gelesen, dass die Option ".html()" auch möglich ist. Damit müsste ja theoretisch ohne Probleme HTML-Code generieren lassen, der dann angezeigt wird?

Ich bastel noch etwas ... !


Bis dahin,
Midivirus
Bitte warten ..
Mitglied: EvilMoe
05.08.2011 um 09:54 Uhr
Hallo,

der Selektor ist auch falsch. Weil du dein Link und Button auch in der Tabelle hast muss die Zeile nicht mehr nach dem letzten td "$('tr_last').after" sondern du willst es davor haben.
Also heißt es nicht mehr "after" sondern "before" weil du deine Zeile ja davor haben möchtest.


Klar, before und after machen nichts anderes als HTML(). Nur mit der Anweisung noch ob du den Code vor einem Element oder nach einem Element haben möchtest. HTML würde direkt in das Element schreiben.
01.
 
02.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
03.
<html xmlns="http://www.w3.org/1999/xhtml"> 
04.
<head> 
05.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
06.
<title>Test</title> 
07.
<script type="text/javascript" src="jquery.js" ></script> 
08.
<script type="text/javascript"> 
09.
$(document).ready(function(){  
10.
 
11.
	$('.mehr').click(function(){ 
12.
		$("tr:last").before( 
13.
			'<tr>'+ 
14.
				'<td>Spalte 1 JS</td>'+ 
15.
				'<td>Spalte 2 JS</td>'+ 
16.
			'</tr>' 
17.
		); 
18.
	}) 
19.
 
20.
 
21.
});  
22.
</script> 
23.
 
24.
</head> 
25.
<body> 
26.
<a href="#" class="mehr">Mehr!</a> 
27.
 
28.
 
29.
<div> 
30.
 
31.
 
32.
    <TABLE> 
33.
        <TR> 
34.
            <TD>Spalte1</TD> 
35.
            <TD>Spalte2</TD> 
36.
        </TR> 
37.
    <!-- JS Zeilen ... --> 
38.
        <TR> 
39.
            <TD><a href="#" class="mehr">Mehr!</a></TD> 
40.
            <TD><input type="submit" class="submit" value="Senden" /></TD> 
41.
        </TR> 
42.
    </TABLE> 
43.
 
44.
 
45.
</div> 
46.
 
47.
</body> 
48.
</html>
Bitte warten ..
Mitglied: Midivirus
05.08.2011 um 10:01 Uhr
hey EvilMoe,

du bist genial.

Das, was ich wollte, klappt damit. Warum findet man das nicht über google mal ganz einfach im Netz? Was mein Grund war, hier ein Thema zu eröffnen (...)

Bis demnächst,
der J-Fummler Midi
Bitte warten ..
Ähnliche Inhalte
JavaScript
Mit Javascript html Element bewegen
gelöst Frage von deinernstjetztJavaScript2 Kommentare

Hallo, ich habe einen Javascript geschrieben der ein HTML Element bewegt. Er verändert den Abstand zu anderen Elementen mit ...

Microsoft Office

Excel Zelle dynamisch einer Zeile zuordnen

gelöst Frage von sammy65Microsoft Office3 Kommentare

Hallo miteinander, ich habe eine Excel Tabelle, die mir einer Acces Abfrage gefüttert wird. Funktioniert Tadellos. Jetzt vollen meine ...

JavaScript

(JavaScript) HTML-Tabelle spalten Filtern

gelöst Frage von unauthorized-userJavaScript5 Kommentare

Guten Tag an alle, da ihr mir in den vergangenen Wochen schon bei mehreren Problemen geholfen habt, dachte ich, ...

Microsoft Office

Word - Schnellbaustein - Feld - Database in eine Tabelle (Zelle) einfügen

Frage von adm2015Microsoft Office

Hallo zusammen, gibt es eine Möglichkeit ein Database Feld aus einer Excel Datenquelle in eine Word Tebellenzelle einzugügen? Ich ...

Neue Wissensbeiträge
Windows 10

Blackscreen nach dem Update von 1908 auf 1809 wenn der Rechner aus dem Standby gestartet wird

Tipp von FSX2010 vor 14 StundenWindows 103 Kommentare

Habt ihr den Samsung Treiber "Samsung_NVM_Express_Driver_3.0" installiert sollte dieser für 1809 deinstalliert werden da dieser nicht kompatibel ist. Der ...

Utilities
Teamviewer 14 Verbindungsprobleme mit Proxy
Tipp von PeterleB vor 1 TagUtilities

Nach dem Umstieg von Version 13 auf 14 wollte sich TV nicht mehr mit dem Netz verbinden, ignorierte offenbar ...

Administrator.de Feedback
Unsere Datenbank wurde umgestellt
Information von Frank vor 2 TagenAdministrator.de Feedback5 Kommentare

Hallo User, ich habe in der Nacht unsere Datenbank umgestellt. D.h. neue Version (MySQL 8) und andere Örtlichkeit. Sollte ...

Sonstige Systeme
Es war einmal ein BeOS - Wer erinnert sich noch?
Information von BassFishFox vor 4 TagenSonstige Systeme8 Kommentare

Hallo, Bin gerade ueber Haiku gestolpert, von dessen Existenz als "Nachfolger des BeOS" ich wusste nur mich nie wirklich ...

Heiß diskutierte Inhalte
Vmware
Gebrauchten ESXi- Server verkaufen: Festplatten DSGVO-konform löschen?
Frage von l.scheperVmware20 Kommentare

Hallo, wir möchten einen gebrauchten FUJITSU Server verkaufen. Auf dieser Maschine ist noch ein installiertes ESXi 5.1 und ne ...

Router & Routing
Dediziertes ISP -Routing
gelöst Frage von niLuxxRouter & Routing13 Kommentare

Liebe Community, Ich hätte eine kurze Frage an euch. Durch verschiedene Umstände kann es nun sein, dass sich zwei ...

Samba
Linux Server und Windows Linux Client
gelöst Frage von 137898Samba12 Kommentare

Hallo, ich bräuchte dringend bei der Aufgabe etwas Hilfe. Die Firma XYZ besteht auf zwei Abteilungen Logistik und Technik ...

Windows Server
Windows Server 2012 R2 Komponentenspeicher wurde beschädigt. Inplace Upgrade?
Frage von DeRo93Windows Server11 Kommentare

Hallo liebes Forum, Wir besitzen einen Domänencontroller der auf einem Windows Server 2012 R2 läuft. Dadurch, dass alle Windows ...