2

我已经编写了 html 文件，在其中创建了一个表。所以对于每一行我想定义添加、编辑和删除链接。

html文件的代码如下：

        <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>john.doe@example.com</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>

添加动作的模态如下：

        <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>

Javascript代码如下：

$(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");
            });
        });

添加和删​​除操作现在正在运行，我创建了一个http://jsfiddle.net/sangu0009/FvAuZ/但我需要编写编辑操作。请帮助我解决如何做到这一点。作品更受赞赏。

4

2 回答 2

5

首先，我修复了使您的小提琴第二次不显示对话框的错误，接下来，我为第一个电子邮件和密码创建了编辑，因为不知道名称：

$(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);

});

演示

您应该在get_data()函数中设置数据；

于 2013-01-31T06:33:48.530 回答
2

你可以从这里开始，

将编辑链接更改为具有类编辑的跨度。

$('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;
});
于 2013-01-31T05:58:26.507 回答