So implementieren Sie das Bootstrap -Modal -Box dynamisch Tabellenzeilendaten und Ausfüllen des Formulars

In diesem Tutorial wird beschrieben, wie die Datenattribut- und JavaScript-Ereignisse von Bootstrap verwendet werden, um die entsprechenden Zeilendaten (z. B. E-Mail-Adresse) dynamisch an ein einzelnes Bootstrap-Modal-Feld zu übergeben, wenn Sie auf eine Schaltfläche aus einer HTML-Tabelle klicken, und füllen Sie automatisch die Formularfelder in der Modal-Box aus. Dieser Ansatz vermeidet wiederholt das Definieren von Modalboxen in Schleifen, verbessert die Code -Effizienz und -wartbarkeit und stellt sicher, dass Modalboxen immer die richtigen Daten anzeigen.

In der Entwicklung von Webanwendungen, insbesondere bei der Anzeige von Tabellendaten, müssen wir häufig eine Operationsschaltfläche für jede Zeile der Tabelle bereitstellen, und ein Modal -Box (Modal) wird nach dem Klicken zur Durchführung von Bearbeiten, Beantworten und anderen Vorgängen angezeigt. Ein häufiges Problem ist, dass unabhängig von der Schaltfläche die Schaltfläche angeklickt wird, die Formularfelder im Modalfeld immer dasselbe (normalerweise die erste Zeile) von Daten anzeigen. Dies liegt daran, dass die HTML -Struktur des Modal -Box wiederholt in der Schleife definiert ist oder die dynamischen Daten nicht korrekt an das Formularelement in der Modal -Box übergeben werden.

Dieses Tutorial bietet eine effiziente und empfohlene Lösung: Definieren Sie eine Modalbox als einzelne Instanz und füllen Sie die Daten im Modal-Box dynamisch mit den JavaScript-Ereignissen von Bootstrap und den Daten von HTML5.

Kernprinzip

Der Kern der Realisierung der dynamischen Datenübertragung liegt in den folgenden zwei Punkten:

1. * `Data- Attribut: ** Verwenden Sie auf der Schaltfläche (oder eines anderen Elements), das das modale Feld auslöst.
2. Bootstrap -Modal -Box -Ereignis: Hören Sie die Show.bs.Modal Ereignis des Bootstrap -Modal Box. Dieses Ereignis wird ausgelöst, wenn das Modalfeld angezeigt wird, und das Tastenelement, das das Modal -Box auslöst, kann über das Ereignis erhalten werden. Wir können dann die erforderlichen Daten aus der Dateneigenschaft der Taste extrahieren und sie in das Formularfeld im Modal-Feld in Form eines Formulars füllen.

Implementierungsschritte

1. HTML -Tabellenstruktur und dynamische Datenübertragung

Zunächst müssen wir die Tabellenreihen in einer PHP -Schleife erstellen und die entsprechende E -Mail -Adresse auf jede "Antwort" -Taste einbetten. Hier verwenden wir die DATA-BS-TARGE- und DATA-BS-Toggle-Eigenschaften von Bootstrap, um das ausgelöste Modal-Box anzugeben, und verwenden die Daten-BS-Egal-Eigenschaften, um die E-Mail-Adresse der aktuellen Zeile zu übergeben.

Php // Angenommen, $ conn ist eine etablierte Datenbankverbindung $ SQL = "ID, Name, E -Mail, Betreff, Nachricht, Zeit vom Kontakt"; $ records = mysqli_query ($ conn, $ sql); while ($ data = mysqli_fetch_array ($ records)) { ?> Php } ?>

#	Name	E -Mail	Thema	Nachricht	Zeit	Operation
php echo htmlspecialChars ($ data ['id']); ?>	php echo htmlspecialChars ($ data ['name']); ?>	php echo htmlSpecialChars ($ data ['E -Mail']); ?>	php echo htmlspecialChars ($ data ['Subjekt']); ?>	php echo htmlSpecialChars ($ data ['message']); ?>	php echo htmlspecialChars ($ data ['time']); ?>

HINWEIS: Verwenden Sie bei Ausgabe dynamischer Daten die Funktion HTMLSpecialCharchars () für die Flucht, um Cross-Site-Skriptangriffe (XSS) zu verhindern.

2. Definition von Bootstrap Modal Box

Die HTML -Struktur eines Modalbox sollte nur einmal definiert werden und befindet sich außerhalb der PHP -Schleife. Das Modal -Box enthält ein Formularfeld zum Empfangen von dynamischen Daten, z. B. ein Eingabefeld zum Anzeigen des Postfachs des Empfängers.

 <div class="modal fade" id="expleModal" tabindex="-1" aria-labelledby>
        <div class="modal content">
            <div class="Modal Header">
                <h5 class="modal-title" id="exampleModallabel"> Neue Nachrichten </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"> </button>
            </div>
            <div class="modal-body">
                <form method="post" rollen="Form" engtepe="MultiPart/Form-Data" action="">
                    <div class="row">
                        
                        <div class="col-md-12 mb-3">
                            <label f class="col-form-label"> Empfänger: </label>
                            
                            <eingabe type="E-Mail" class="Form-kontroll" name="E-Mail" id="Empfänger-Email" readonly>
                        </eingabe>
</div>

                        <div class="col-md-12 mb-3">
                            <label f class="col-form-label"> E-Mail-Betreff: </label>
                            <input type="text" class="Form-kontroll" name="Betreff" id="E-Mail-Subject">
                        </div>

                        <div class="mb-3">
                            <label f class="col-form-label"> Nachrichteninhalt: </label>
                            <textarea class="Form-kontroll" rows="8" name="message" id="message-text"> </textarea>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label f class="col-form-label"> Anhang </label>
                            <eingabe type="Datei" class="Form-kontroll" name="file []" multiple id="Attachment">
                        </eingabe>
</div>
                    </div>
                    <button name="senden" type="subieren" class="btn btn-primary"> E-Mail Senden </button>
                </form>
            </div>
        </div>
    </div>

Beachten:

• Die ID des Modal-Box (expleModal) muss mit dem Daten-BS-Target-Wert der Trigger-Taste übereinstimmen.
• Fügen Sie der Mailbox des Empfängers eine ID (Empfänger-Email) hinzu, um JavaScript-Vorgänge zu erleichtern.
• Stellen Sie das Postfacheingangsfeld des Empfängers auf Readonly ein. Normalerweise möchten vorgefüllte Postfächer nicht, dass Benutzer sie nach Belieben ändern.

3.. JavaScript -Datenfülllogik

Dies ist ein wichtiger Schritt bei der Implementierung der dynamischen Datenfüllung. Wir müssen JavaScript -Code schreiben, um für die Show.bs.modal Ereignis von Modalboxen zu hören. Wenn das Ereignis ausgelöst wird, erhalten Sie den Data-BS-was auch immer Attributwert der Trigger-Taste und setzen Sie es auf das entsprechende Eingabefeld im Modal-Feld.

 // Erhalten Sie das modale Kästchen DOM -Element var eventualPlemodal = document.getElementById ('evicyPlemodal');

// Hören Sie sich die show.bs.modal -Ereignis des Modal Box ExamPlemodal.AdDeVentListener ('show.bs.modal', function (Ereignis) {an.
    // Erhalten Sie die Schaltfläche, die die Modal -Box var button = Ereignis.ReformationTarget auslöst; // `relatedTarget` ist das DOM-Element, das das modale Feld auslöst // Daten aus dem Data-BS-Whatching-Attribut der Schaltfläche var recicentemail = button.getAttribute ('Data-BS-was auch immer');

    // Erhalten Sie den Titel- und Empfänger-Eingabefeld im Modal-Box var modaltitle = exampleModal.querySelector ('. Modal-title');
    var recicentInput = eventPlemodal.querySelector ('#Empfänger-Email'); // Erhalten Sie das Empfänger -Eingangsfeld basierend auf der ID // Aktualisieren Sie den Titel des Modal -Feldes und den Wert des Empfängereingangsfelds Modaltitle.textContent = 'Antwort auf die E -Mail an' reciplesMail;
    recicalInput.Value = recicentemail;
});

Platzieren Sie diesen JavaScript -Code in das -Tag der HTML -Datei, normalerweise vor dem

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Bootstrap -Modal -Box dynamisch Tabellenzeilendaten und Ausfüllen des Formulars. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!