Die Wiederverwendung von einzelnen HTML-select / Dropdown-Liste für mehrere Tabellenzeilen?

Ich habe eine HTML-Tabelle, die in der Regel 10-30 Zeilen lang, mit einer Spalte für die "Element name". Die drop-down selbst hat rund 75 Produkte, zum von zu wählen. Um die Seite auf eine kleinere Größe, die ich wollte, um die Wiederverwendung einer einzelnen drop-down-Liste für jede Zeile.

Ist, wenn ich auf eine Zeile klicken, jQuery sollte

  1. Lesen Sie den Artikel-Namen in der TD
  2. Laden Sie die drop-down-Liste in der TD
  3. Wählen Sie den aktiven Wert als der text an den bisherigen Wert
  4. Auf die Zeile exit, kehren Sie den Prozess

Der Elemente in der drop-down-gefüllt von einer Datenbank auf die Seite laden. Ich denke der beste Weg ist, um die Liste ausgeblendet, und es erscheinen an dieser Stelle als notwendig. Aber ich bin mir nicht sicher, wie das zu erreichen ist Schritt 2 und 3

Bearbeiten

Nicht sicher, was code, den Sie suchen, da es ist, was meine Frage ist. Aber wenn ich etwas, wie unten, muss ich setzen, dass versteckte select-Liste in die aktive Zeile und machen Sie select, um den Wert schon in der Zelle.

<table>
    <tr>
        <td>Item Name</td>
        <td>Item Value</td>
    </tr>
    <tr>
        <td>Product A</td>
        <td>166.22</td>
    </tr>
    <tr>
        <td>Product B</td>
        <td>166.22</td>
    </tr>
</table>

<select id="itemname" style="display:none;">
    <option value="2231A22">Product A</option>
    <option value="2231A21">Product B</option>
    <option value="2231A20">Product B</option>
</select>

Edit 2 - Wahrscheinliche Lösung

Basierend auf einem der unten aufgeführten Antworten, ich stocherte ein bisschen herum und war in der Lage, erstellen Sie dieses Skript und die funktioniert auch. Nicht sicher, ob ich es machen kann, mehr effizient, aber es macht das, was ich suchte. Die Funktion "e" als TD

    function addItem(e) {
        if ($(e).find('select').length) {
            var input = $(e).find('select').eq(0);
            $(e).text($(input).val());
            $(input).appendTo($('.promotion-header'));
        }
        else {
            var text = $(e).text();
            $(e).text('');
            $('#itemname').appendTo(e).val(text).show();
        };
    }
was hast du schon zu tun?
Zeig bitte deinen code, sowohl HTML und javascript.
Ich würde nicht einmal die Mühe, Sie verschieben es in die Tabelle.... nur neu positionieren wählen Sie über die entsprechende Zeile jedes mal
möchten Sie Sie ersetzen den Namen des Elements TD mit der dropDownList??

InformationsquelleAutor ElPresidente | 2013-10-30

  1. 1

    Kopieren Sie alle Elemente der Haupt-div um alle anderen div-Element verwenden, indem Sie festlegen und abrufen von html-Code aus .html () - Methode. Hier in der demo werden alle Elemente in myDropDownListDiv kopiert anotherDiv.

    HTML :

    <div id="myDropDownListDiv"><select id="itemname">
    <option value="2231A22">Product A</option>
    <option value="2231A21">Product B</option>
    <option value="2231A20">Product B</option>
</select>
</div>
    <div id="anotherDiv">
</div>

    jQuery :

    $(document).ready(function(){
    //copies all contents of myDropDownListDiv into anotherDiv
    $("#anotherDiv").html($("#myDropDownListDiv").html());
});

    Demo

    diese nicht zu nutzen, wählen Sie nur eine Seite für die ganze Tabelle als OP beantragt. Noch tut es das update Wert ona pro Zeile-basis
    Schleife durch alle <tr>'s mit jQuery .jedes(), fügen Sie die dropDownList, setzen Sie die option der dropDownList mit der innerHTML-der <tr>. Dies wird helfen, denke ich.
    Ich habe ein edit zu meinem post. Ich sah mich um, was Ihr code hat, und ich glaube, ich kam über das, was ich brauchte

    InformationsquelleAutor Ashad Shanto

Schreibe einen Kommentar