0

抱歉标题含糊不清，想不出如何为我的问题命名。所以我制作了一个 html/css 表，其中我为每一行放置了一个编辑按钮。按下按钮将允许用户编辑其中的数据，从而将某个文本字段转换为文本输入字段；同时编辑按钮然后转换为保存按钮。编辑后，用户将按下保存按钮，然后文本输入字段将恢复为文本字段，而保存按钮将恢复为编辑按钮。但这并不完全有效

这是我的问题，编辑里面的数据后，按下保存按钮后，里面的数据被删除并替换为：<input type= and outside the text-input field is: " /> 并且保存按钮保持原样，一个“保存”按钮而不是返回一个“编辑”按钮

这是脚本：

$(document).ready(function () {

    // listen for email edit button click
    $("button#edit").on('click', function () {
        // get email inline to this edit button
        var email = $(this).parent().siblings('td.email').html();
        alert(email);

        // change button from edit to save
        $(this).attr('id', 'save-email').html('SAVE');

        // change email display to input field
        $(this).parent().siblings('td.email').html('<input type="text" id="user-email" value="' + email + '" />');
    });

    // listen for email save button click
    $("button#save-email").on('click', function () {

        // get new email inline to this save button
        var newEmail = $(this).parents('tr').find($('input#user-email')).val();
        alert(newEmail);

        // change input field back to display
        $(this).parent().siblings('td.email').html(email);

        // change button from save to edit
        $(this).attr('id', 'edit').html('EDIT');
    });
});

对不起文字墙。

4

4 回答 4

1

试着这样说：

$(document).on('click',"button#save-email", function() {...

代替

$("button#save-email").on('click', function()

使用第二个是行不通的，因为当它运行时，$("button#save-email") 还不存在。

于 2013-07-31T11:34:06.590 回答
0

看看 KnockoutJS，它利用了很好的 Bindings 来帮助您更轻松地完成类似的事情。这是一个带有 KnockoutJS 的可编辑网格的示例

KnockoutJS 可编辑数据示例

于 2013-07-31T11:34:30.640 回答
0

问题是第一个处理程序是脚本中唯一附加的处理程序。

当页面准备就绪时，您的 javascript 代码就会执行。
那时只附加了第一个处理程序，因为还没有元素button#save-email。当您单击保存时，它是再次执行的第一个处理程序，而不是认为！

为什么不创建两个不同的按钮并显示一个或另一个？

<table>
    <tr>
        <td class="email">myemail@domain.com</td>
        <td>
            <button class="btn-edit">Edit</button>
            <button class="btn-save" style="display:none">Save</button>
        </td>
    </tr>
    <tr>
        <td class="email">myemail@domain.com</td>
        <td>
            <button class="btn-edit">Edit</button>
            <button class="btn-save" style="display:none">Save</button>
        </td>
    </tr>
</table>

Javascript

// listen for email edit button click
$('.btn-edit').on('click', function() {

    var $this = $(this),
        $parentRow = $this.closest('tr');

    // get email inline to this edit button
    var email = $this.parent().siblings('td.email').html();

    // change button from edit to save
    $parentRow.find('.btn-edit').hide();
    $parentRow.find('.btn-save').show();

    // change email display to input field
    $(this)
        .parent()
        .siblings('td.email')
        .html('<input type="text" id="user-email" value="'+email+'" />');
});

// listen for email save button click
$('.btn-save').on('click', function() {

    var $this = $(this),
        $parentRow = $this.closest('tr');

    // get new email inline to this save button
    var newEmail = $(this).parent().siblings('td.email').find('#user-email').val();

    // change input field back to display
    $(this).parent().siblings('td.email').html(newEmail);

    // change button from save to edit
    $parentRow.find('.btn-edit').show();
    $parentRow.find('.btn-save').hide();

});

演示

于 2013-07-31T11:45:47.547 回答
0

整洁和工作 

<table>    
  <tr>
    <td>some text</td>
    <td><input type='button' value='edit' id='btn'/></td>
  </tr>        
</table>


$(document).ready(function() {
$("#btn").click(function() {
    var $btn=$(this);

    var opn= $btn.val()


    switch(opn){

        case 'edit':
            var $td=$(this).parent().parent().find('td:first');
            var email=$td.html();
            $td.html("").append('<input type="text" value="'+email+'">');
            $btn.val("save");
            break;

        case 'save':
            var $input=$(this).parent().parent().find('td:first input');
            var email=$input.val();
            $input.parent().html(email);
            $btn.val("edit");
            break;    
   }
 });
});

http://jsfiddle.net/h55rc/

于 2013-07-31T11:59:19.473 回答