Mit Jquery ersetzen Sie eine Zeile in der Tabelle mit einer neuen

Sagen, ich habe eine Tabelle:

<table id="mytable">
      <tr class="old_row"><td>1</td><td>2</td><td class="edit">Edit</td></tr>
      <tr class="old_row"><td>1</td><td>2</td><td class="edit">Edit</td></tr>
      <tr class="old_row"><td>1</td><td>2</td><td class="edit">Edit</td></tr>
</table>

Ich möchten, klicken Sie auf die <td>Edit</td> Zelle und Verwendung von jquery zu ersetzen die gesamte Zeile durch eine neue Zeile mit mehr Inhalt, z.B.

    $(document).ready(function() {

        $('#mytable .edit').click( function() {

            var tr = $(this).parent();
            var new_row = '<tr class="new_row"><td>3</td><td>4</td><td>Save</td></tr>'
            //code to replace this row with the new_row
        });

    } );

Irgendeine Idee, wie dieses getan werden könnte?

InformationsquelleAutor Steve Walsh | 2011-09-22
  1. 20
    $(document).ready(function() {

    $('#mytable .edit').click( function() {

        var new_row = '<tr class="new_row"><td>3</td><td>4</td><td>Save</td></tr>'
        $(this).parent().replaceWith(new_row);
    });

} );
    InformationsquelleAutor maxedison
  2. 4

    Verwenden jQuery.replaceWith()

    $(document).ready(function() {
  $('#mytable .edit').click( function() {
    var tr = $(this).parent();
    var new_row = '<tr class="new_row"><td>3</td><td>4</td><td>Save</td></tr>';
    tr.replaceWith(new_row);
  });
});
    • Dies ist, was dieser Mann redet: jsfiddle.net/rYPdw/2
    • Das gleiche, was ich gepostet nur Ihre erstellen new_row als ein jQuery-Objekt in der Erwägung, verließ ich es als HTML-String. Im wesentlichen den gleichen code.
    • Yep. 🙂 Aber Sie Tippen schneller als ich.
    InformationsquelleAutor John Hartsock
  3. 1

    jQuery replaceWith(). Beispiel:

    $(document).ready(function() {
    $('#mytable .edit').click( function() {

        var tr = $(this).parent();
        var new_row = '<tr class="new_row"><td>3</td><td>4</td><td>Save</td></tr>'
        tr.replaceWith(new_row); //code to replace this row with the new_row
    });
} );
    InformationsquelleAutor Dennis
  4. 0

    http://jsfiddle.net/hAvyv/

    $('.edit').click(function(){
    $(this).parent().removeClass('old_row').addClass('new_row').html('<td>3</td><td>4</td><td>Save</td>');
});
    InformationsquelleAutor Korvin Szanto
Schreibe einen Kommentar