Stellen Sie html-Tabellen editierbare und ermöglichen eine pro-Zeile-Taste, wenn sich der text ändert sich in dieser Zeile

Ich habe eine html-Tabelle, die wie folgt aussieht:

    <table id="tree">
        <tr id="foo-1">
            <td>fooId1</td>
            <td>fooName1</td>
            <td>fooCsv1</td>
            <td><button id="button-1" type="button" disabled>Save</button></td>
        </tr>
        <tr id="foo-2">
            <td>fooId2</td>
            <td>fooName2</td>
            <td>fooCsv2</td>
            <td><button id="button-2" type="button" disabled>Save</button></td>
        </tr>
    </table>

Gibt es zwei änderungen, die ich tun will, um diese Tabelle:

-Erste, ich möchte, um die fooName und fooCsv td-Elemente editierbar (dort gibt es tatsächlich ein paar mehr Bearbeitbare Spalten, aber ich bin nur mit zwei, um in diesem Beispiel einfacher). Ich weiß, dass ich einfach einen input im td-element und den Wert, aber Frage mich, ob es eine einfachere Möglichkeit.

Sekunden, ich will die Speichern-Schaltfläche in jeder Zeile, die aktiviert werden, wenn ein Benutzer ändert den text in der Zeile über dem Befehl/copy-paste/etc. Ich habe gegoogelt und festgestellt, dass ich möglicherweise tun Sie dies, indem Sie einen handler für ein Eingabe-Ereignis, aber ich bin nicht sicher, dass der einfachste Weg, zu integrieren, und ich bin mir nicht sicher, ob es Konsequenzen für die erste Aufgabe, die ich habe.

Ich denke, das sollte einfach sein, wenn ich wusste, dass viel über html und javascript, aber ich glaube nicht, also kennt jemand einen einfachen Weg, das zu erreichen, was ich versuche zu tun?

Was meinst du mit 'speichern unter'?
speichern = das Update des db, aus dem die Tabelle erzeugt wurde (code nicht vorhanden)

InformationsquelleAutor jonderry | 2013-06-22

Schreibe einen Kommentar