Umwandlung von Formular-Elemente (Input) zu divs

gibt es eine Möglichkeit zu verwandeln, alle Eingaben Feld für divs? oder span oder so etwas.
ich habe eine Tabelle wie:

<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>

und ich will kopieren Sie diese Quelle, um ein Licht-box, ohne Eingänge.. wie:

<table>
<tr>
<td>Principal:</td>
<td><div>100.00$</div></td>
</tr>
<tr>
<td>start date:</td>
<td><div>02/02/2002</div></td>
</tr>
<tr>
<td>end date:</td>
<td><div>02/02/2002</div></td>
</tr>
</table>

ich Frage mich, gibt es einen Weg, um zu konvertieren alle diese Eingaben zur divs kann über die Verwendung .ersetzen oder etwas anderes ?

Dank

InformationsquelleAutor Simasher | 2011-03-15
  1. 8

    Versuchen Sie dies:

    $('#calc').clone().appendTo('#lightbox');
$('#lightbox input').replaceWith(function() {
    return $('<div>' + $(this).val() + '</div>');
});

    jsfiddle - http://jsfiddle.net/infernalbadger/c9Rub/2/

    Aktualisiert und kopieren den Inhalt in ein anderes div mit der ID lightbox.

    • persönlich würde ich gehen für this - return $('<div>').text($(this).val ()) -, um sicherzustellen, dass alle HTML in den Eingabefeldern nicht gerendert.
    • ich habe versucht, dieses konnte aber nicht machen :/
    • Was ist passiert?
    • Auch, welche version von jquery benutzt du?
    • den Wechsel der original-html-Quelle. meine Inhalte haben ein paar Licht-box, eine von Ihnen, die Berechnung.. die andere ist für den Druck.. und ich habe versucht, aber sein, zu bewirken, um original-Quelle.. ich habe versucht ein paar Attraktion auf, aber ich erhielt [Objekt, Objekt]
    • Überprüfen Sie die Aktualisierung. Es wird nun kopieren Sie den Inhalt in ein anderes div-Element und klicken Sie dann auf ändern. Sie können ersetzen Sie #lightbox-mit was auch immer element-ID, die Sie benötigen.
    • jetzt bin ich versucht : var a= $('#calc').html(); $("input",a).each(function(){ dieses.outerHTML = "<div>" + diese.Wert+ "</div>"; }); PrintPopUp(a)
    • ohh danke lemme versuchen Sie es
    • ja, es hat geklappt! Vielen, Vielen Dank!

    InformationsquelleAutor Richard Dalton
  2. 1

    Davon aus, dass du keine libs:

    Hier http://www.w3schools.com/jsref/dom_obj_all.asp, Sie finden einige nützliche Funktionen, um dies zu tun.

    Indem man die input-Elemente, die Sie benötigen, so etwas wie dieses:

    var inputs = document.getElementsByTagName('input');

    Können Sie ersetzen Sie Sie mit dieser:

      //pseudo
  for each input element
    var parentNode = input.parentNode;
    parentNode.removeChild(input);
    parentNode.innerHTML('<div>' + input.value + '</div>');

    In dem link, den ich oben, finden Sie einige Funktionen, die entweder zu ersetzen, die Kind-oder findParent, entfernen Sie die aktuellen Kind-und dann hängen Sie Ihre div selbst.

    • oh sorry, ich vergaßen zu sagen, dass ich mit Hilfe von jquery, ich schrieb es auf-tags, aber vergaßen zu verwenden, die auf die Beschreibung.
    InformationsquelleAutor JeanK
  3. 0

    Wenn Sie jquery können Sie das folgende tun.

    <script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#btnChange").click(function () {
            $("#calc :input").each(function () {
                this.outerHTML = "<div>" + this.value+ "</div>";
            });
        });
    });
</script>

<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>
<input type="button" id="btnChange" value="Change" />
    • das sieht aus wie gonna Arbeit.. lemme versuchen
    • es erfolgt Grund-Inhalt, aber ich war kopieren wollen, die Inhalte auf ein anderes lightbox. InfernalBadger Lösung gearbeitet.. danke
    InformationsquelleAutor Thomas
Schreibe einen Kommentar