用于编辑和删除表行的 Jquery [英] Jquery for edit and delete table row

问题描述

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

html文件的代码如下:

 
<h1>现有用户:</h1><table id="users" class="ui-widget ui-widget-content"><头><tr class="ui-widget-header"><th>姓名</th><th>电子邮件</th><th>密码</th><th>动作</th></tr></thead><tr><td class="custom-name">John Doe</td><td>[e-mail]</td><td>johndoe1</td><td><a href="">编辑</a></td><td><span class="delete"><a href="">Delete</a></span></td></tr></tbody>
<button id="create-user">创建新用户

添加动作的模态如下:

 
<p class="validateTips">所有表单字段是必需的.</p><表格><字段集><label for="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></选择><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></选择><label for="email">电子邮件</label><input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all"/><label for="password">密码</label><input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all"/></fieldset></表单>

Javascript 代码如下:

$(function() {var fname = $("#first-name"), lname = $("#last-name"), email = $("#email"), password = $("#password");$("#dialog-form").dialog({自动打开:假，高度:300，宽度 : 350,模态:真，纽扣 : {创建一个帐户":function() {$("#users tbody").append("" + "" + (fname.find("option:selected").text()+' ').concat(lname.find("option:selected").text())+ "" + "" + email.val() + "" + "" + 密码.val() + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><;span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");$(this).dialog("close");},取消:函数(){$(this).dialog("close");}},关闭:函数(){allFields.val("").removeClass("ui-state-error");}});$('span.delete').live('click', function() {$(this).closest('tr').find('td').fadeOut(1000,功能(){//警报($(this).text());$(this).parents('tr:first').remove();});返回假；});$("#create-user").button().click(function() {$("#dialog-form").dialog("open");});});

添加和删除操作现在正在运行，我创建了一个 http://jsfiddle.net/sangu0009/FvAuZ/ 但我需要编写编辑操作.请帮助我提供一些解决方法.作品更受赞赏.

解决方案

您可以从这里开始，

使用类编辑将编辑"链接更改为跨度.

$('span.edit').on('click', function() {$("#dialog-form").dialog({自动打开:假，高度:300，宽度 : 350,模态:真，纽扣 : {编辑帐户":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);},取消:函数(){$(this).dialog("close");}},关闭:函数(){allFields.val("").removeClass("ui-state-error");}});返回假；});

I have written html file, where in I have created a table. So for each row I want to define add, edit and delete links.

The code for html file is as below:

        <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>[e-mail]</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>

The modal for add action is as below:

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

And the Javascript code is as below:

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

The add and delete actions are working now and I have created a http://jsfiddle.net/sangu0009/FvAuZ/ but I need to write edit action. Please help me with some solutions to how to do it. The work is more appreciated.

解决方案

Here is something you can start with,

Change the Edit link to a span with class edit.

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

这篇关于用于编辑和删除表行的 Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！