Wie zeichne Darstellung von dynamisch erstellten Element

Question

So habe ich einige Javascript-Code, der eine Tabellenzeile erstellt durch Erzeugen einer Zeichenfolge und Anhängen an die Tabelle. Beispiel:

var str = '<tr><td>Column</td><!--More columns--></tr>'; 
$('#my-table').append(str); 

Es gibt ein Element (eine Eingabe) in der Zeile, die eine Menge von Attributen hat. Dies ist schwer als eine lange Zeichenfolge zu lesen, also möchte ich dieses eine bestimmte Element auf eine andere Weise erstellen - $() verwenden und Attribute als ein Objekt übergeben wie dokumentiert here - und dann verketten es mit der obigen Zeichenfolge. Also habe ich versucht, so etwas zu tun:

var el = $('<input>', { 
 
\t type: 'text', 
 
\t name: 'some_name' 
 
}); 
 

 
var str = '<tr><td>test</td><td>'+el.html()+'</td></tr>'; 
 
$('#my-table').append(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="my-table"> 
 

 
</table>

Dies soll (dachte ich) ein Textfeld als zweite Spalte in der Tabelle erstellen, aber es funktioniert nicht. Ich bekomme nur eine leere Zelle und keine Fehler. Was mache ich falsch? Oder was soll ich tun?

Answer 1

jQuery html() ist das innereHTML nicht das äußereHTML. Du willst das letztere.

var el = $('<input>', { type: 'text', name: 'some_name' }); 
 
var str = '<tr><td>test</td><td>'+ el[0].outerHTML +'</td></tr>'; 
 
$('#my-table').append(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="my-table"></table>

Answer 2

Sie möchten den Wert von Eingabe, nicht die innere HTML. Versuchen Sie folgendes:

var str = '<tr><td>test</td><td>'+el.val()+'</td></tr>'; 

Answer 3

var $input = $('<input>', { 
    type: 'text', 
    name: 'some_name', 
    /* ... more attributes ... */ 
}); 
var $tr = $("<tr>").appendTo('#my-table'); 
var $td = $("<td>").append($input).appendTo($tr); 

// possibly do other things with $input, $tr, and $td 

Dass gesagt wird, sollten Sie wirklich nicht beim Aufbau komplexer HTML mit jQuery. Es ist umständlich, führt zu unlesbarem und letztlich fehlerhaftem, schwer zu wartendem Code. (Noch mehr als das, sollten Sie wirklich HTML nicht durch Verketten von Zeichenfolgen erstellen.)

Erstellen Sie eine Datenstruktur (ein Array von Objekten) und lassen Sie dann eine HTML-Templating-Bibliothek die Arbeit machen. Es gibt eine ganze Reihe von reifen Bibliotheken zur Auswahl, wobei lenker.js eine prominente Rolle spielt. Es wird in Form von viel Cleaner JavaScript-Code, um eines von ihnen zu verwenden.