Positionierung in einer HTML-Tabelle

Question

Ich habe eine HTML-Tabelle, in der ich eine Schaltfläche zum Senden habe. Jetzt rufe ich eine Funktion in meiner JavaScript-Datei auf, die ein Captcha erstellen soll, und lege sie in die HTML-Seite innerhalb der Tabelle, in der ich den Absenden-Button habe.

Und in der JavaScript, mache ich eine document.write() und fügen Sie das Bild aus der JavaScript-Datei in die HTML-Seite. Jetzt möchte ich sowohl dieses Bild als auch das Senden in derselben Tabelle, aber das Senden muss auf der HTML-Seite sein und das Bild muss nur in der JavaScript-Datei sein. Leider wird das Bild irgendwo unten auf der Seite eingefügt. Ich verstehe nicht, wie diese Positionierung funktioniert. Gibt es eine Lösung, wo ich sie in die gleiche Tabelle einfügen kann, obwohl beide Steuerelemente in separaten Dateien sind?

Beispielcode:

in der HTML-Seite: die Submit-Button in einer Tabelle in dem Formular-Tag platziert ...

in der JavaScript-Datei:

document.write("img position=\"relative\" src=\"" + decodeURIComponent(imgdir) + imgid + ".jpg\" height=\"50\" width=\"100\" align=\"left\" style=\"margin-left: 4px;\" height=\"80\"); 
} 

Answer 1

Sie könnten versuchen, das HTML-Tag im HTML-Format zu definieren, wo Sie es in der Tabelle möchten, und verstecken Sie es einfach in CSS-Stil, bis Sie die Quelle mit Ihrem Javascript festlegen. Sie müssen auch ID darauf setzen, um Zugriff im Javascript zu erhalten.

In der Tabelle definieren Sie die HTML-Tabellenzelle wie folgt aus:

<td> 
    <!-- Your submit button goes here... --> 
    <img id="imagePlaceholder" style="display:none;margin-left:4px;" height="50" width="100" align="left" /> 
</td> 

Im Javascript Sie dies tun:

var image = document.getElementById("imagePlaceholder"); 
image.src = decodeURIComponent(imgdir) + imgid + ".jpg" ; 
image.style.display = "inline"; // Make the image tag visible 

Answer 2

Neben der vorherige Kommentar Ich würde die Verwendung von document.write stark vermeiden, da es sich so leicht auf die Semantik des HTML auswirkt. Ich würde vorschlagen, innerHTML immer zu verwenden, um Elemente zu schreiben und sie dynamisch zu füllen. innerHTML ist kein Standard, aber 2,5 bis 3,5 mal schneller als DOM-Methoden. Ich empfehle Ihnen auch dringend, Ihren dynamisch generierten HTML-Code zu validieren, um Schwachstellen zu entdecken, die von Ihrem JavaScript eingeführt wurden.

Answer 3

document.write() anhängt HTML zum Ende der Seite. Sie möchten wahrscheinlich etwas wie appendChild() verwenden, um Ihr Bild in die richtige Tabellenzelle einzufügen. Zum Beispiel:

var img = document.createElement('img'); 
img.src = decodeURIComponent(imgdir) + '.jpg'; 
// set the rest of the attributes... 
var imgTd = document.getElementsById('imgDestination'); 
imgTd.appendChild(img); 

Einige Vorschläge:

• Verwenden Sie einen JavaScript-Bibliothek wie jQuery-es Sachen wie diese trivial macht.
• Verschieben Sie das Bildstyling vom Element und in ein <style> Element oder eine externe CSS-Datei.