Jquery für Bearbeiten und löschen von Tabellen-Zeile

Ich geschrieben habe, html-Datei, wo ich eine Tabelle erstellt haben. Also für jede Zeile möchte ich definieren, hinzufügen, Bearbeiten und löschen von links.

Den code für die html-Datei ist wie folgt:

        <div id="users-contain" class="ui-widget">
        <h1>Existing Users:</h1>
        <table id="users" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header ">
                    <th>Name</th>
                    <th>Email</th>
                    <th>Password</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="custom-name">John Doe</td>
                    <td>[email protected]</td>
                    <td>johndoe1</td>
                    <td><a href="">Edit</a></td>
                    <td><span class="delete"><a href="">Delete</a></span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <button id="create-user">
        Create new user
    </button>

Den modal für die add-Aktion ist wie folgt:

        <div id="dialog-form" title="Create new user">
        <p class="validateTips">
            All form fields are required.
        </p>
        <form>
            <fieldset>
                <label for="first_name">First Name</label>
                <select id="first-name">
                    <option value="1">Arun</option>
                    <option value="2">Ganesh</option>
                    <option value="3">Suresh</option>
                    <option value="4">Sanganabasu</option>
                </select>
                <label for="last_name">Last Name</label>
                <select id="last-name">
                    <option value="1">Hulagabal</option>
                    <option value="2">Cheemalamudi</option>
                    <option value="3">Ganiger</option>
                    <option value="4">Kattriguppe</option>
                </select>
                <label for="email">Email</label>
                <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
                <label for="password">Password</label>
                <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
            </fieldset>
        </form>
    </div>

Und der Javascript-code ist wie folgt:

$(function() {

            var fname = $("#first-name"), lname = $("#last-name"), email = $("#email"), password = $("#password");

            $("#dialog-form").dialog({
                autoOpen : false,
                height : 300,
                width : 350,
                modal : true,
                buttons : {
                    "Create an account" : function() {
                        $("#users tbody").append("<tr>" + "<td>" + (fname.find("option:selected").text()+' ').concat(lname.find("option:selected").text())+ "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
                        $(this).dialog("close");

                    },
                    Cancel : function() {
                        $(this).dialog("close");
                    }
                },
                close : function() {
                    allFields.val("").removeClass("ui-state-error");
                }
            });

              $('span.delete').live('click', function() {  
                $(this).closest('tr').find('td').fadeOut(1000, 
                    function(){ 
                        //alert($(this).text());
                        $(this).parents('tr:first').remove();                    
                    });    

                return false;
            });
            $("#create-user").button().click(function() {
                $("#dialog-form").dialog("open");
            });
        });

Die add-und delete-Aktionen arbeiten und jetzt habe ich eine http://jsfiddle.net/sangu0009/FvAuZ/ aber ich brauche, um zu schreiben, Bearbeiten-action. Bitte helfen Sie mir mit einigen Lösungen, wie es zu tun. Die Arbeit wird mehr geschätzt.

live ist depricated
1. alle, die Ihre Benutzer erstellen Formular mit select für die Erste und Letzte name, und ich sehe keine Möglichkeit combintation zu John Doe
grundsätzlich sollte invoke gleichen Benutzer anlegen-dialog (var dlg=$('#dialog-form').clone();dlg.dialog({title: 'edit user'}) und stellen aktuelle Daten aus der Zeile in Felder des Formulars auf submit, regenerieren die Zeile und markieren Sie Sie als verändert (row.data('changed',true))
Die ich erstellt habe, jsfiddle.net/sangu0009/FvAuZ. Gehen Sie bitte durch und helft mir.
als ich sagte, ich kann mir nicht helfen, weil hier select für die erste/Letzte name... auch ich nicht gehen, um den code hier

InformationsquelleAutor Sanganabasu | 2013-01-31

  1. 2

    Hier ist etwas, das Sie beginnen können mit,

    Ändern Sie den link Bearbeiten, um ein span mit der Klasse Bearbeiten.

    $('span.edit').on('click', function() {  

    $("#dialog-form").dialog({
        autoOpen : false,
        height : 300,
        width : 350,
        modal : true,
        buttons : {
            "Edit an account" : function() {

                name = $(this).closest('tr').find('td.custom-name').text().split(' ', 2);
                email = $(this).closest('tr').find('td:nth-child(2)').text();
                pass = $(this).closest('tr').find('td:nth-child(3)').text();
                var fname = name[0], lname = name[1];

                $("#first-name option:contains('" + name[0] + "')").attr('selected', 'selected');
                $("#last-name option:contains('" + name[1] + "')").attr('selected', 'selected');
                $("#email").text(email);
                $("#password").text(pass);

            },
            Cancel : function() {
                $(this).dialog("close");
            }
        },
        close : function() {
            allFields.val("").removeClass("ui-state-error");
        }
    });

    return false;
});

    InformationsquelleAutor Jaspal Singh

  2. 5

    Zuerst habe ich behoben-Fehler, der lässt Sie Ihre Geige nicht zeigen Dialogfeld zweiten mal, als Nächstes erstellte ich Bearbeiten 1. E-Mail und Passwort, weil hve keine Ahnung über die Namen:

    $(function () {

    var new_dialog = function (type, row) {
        var dlg = $("#dialog-form").clone();
        var fname = dlg.find(("#first-name")),
            lname = dlg.find(("#last-name")),
            email = dlg.find(("#email")),
            password = dlg.find(("#password"));
        type = type || 'Create';
        var config = {
            autoOpen: true,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": save_data,
                    "Cancel": function () {
                    dlg.dialog("close");
                }
            },
            close: function () {
                dlg.remove();
            }
        };
        if (type === 'Edit') {
            config.title = "Edit User";
            get_data();
            delete(config.buttons['Create an account']);
            config.buttons['Edit account'] = function () {
                row.remove();
                save_data();

            };

        }
        dlg.dialog(config);

        function get_data() {
            var _email = $(row.children().get(1)).text(),
                _password = $(row.children().get(2)).text();
            email.val(_email);
            password.val(_password);

        }

        function save_data() {
            $("#users tbody").append("<tr>" + "<td>" + (fname.find("option:selected").text() + ' ').concat(lname.find("option:selected").text()) + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
            dlg.dialog("close");
        }
    };

    $(document).on('click', 'span.delete', function () {
        $(this).closest('tr').find('td').fadeOut(1000,

        function () {
            //alert($(this).text());
            $(this).parents('tr:first').remove();
        });

        return false;
    });
    $(document).on('click', 'td a.edit', function () {
        new_dialog('Edit', $(this).parents('tr'));
        return false;
    });

    $("#create-user").button().click(new_dialog);

});

    DEMO

    sollten Sie setup-Daten in get_data() Funktion;

    Upvote für demo-link

    InformationsquelleAutor zb'

Schreibe einen Kommentar