Question

以下示例代码用于使用编辑按钮使行可编辑。总共我有3个按钮，最初我隐藏了更新按钮。当我单击编辑按钮时，应启用内联编辑，当我单击更新内联编辑时应禁用。
我写了下面的代码，我无法找到它做错了什么？

$('.edit').click(function(){
        var currentTD = $(this).parents('tr').find('td');
        if ($(this).html() == 'Edit') {
            currentTD = $(this).parents('tr').find('td');
            $.each(currentTD, function () {
            $(this).prop('contenteditable', true)
            });
        } else {
            $.each(currentTD, function () {
            $(this).prop('contenteditable', false)
            });
        }
        });

完整代码：Fiddle。主要的是我正在使用动态数据所以如果我点击编辑只选择行sholuld能够启用。请告诉我我做错了什么

Answer 1

你能看一下下面的代码吗？它只是你的代码只有几个修改：

https://jsfiddle.net/xcmvzpuk/5/

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

    var editId = $(this).attr('id'); //here we will get id like edit0 and edit1 and so on
    $("#" + editId).hide();
    var number = editId.replace("edit", ""); //grab the number from id
    $("#update" + number).show();//show the corresponding update button

    var currentTD = $(this).parents('tr').find('td');
    //enable the current row
    $.each(currentTD, function() {
      $(this).prop('contenteditable', true)
    });

  });

  $('.update').click(function() {
    var updateId = $(this).attr('id');
    $("#" + updateId).hide();
    var number = updateId.replace("update", "");
    $("#edit" + number).show();

    var currentTD = $(this).parents('tr').find('td');
    //disable the current row
    $.each(currentTD, function() {
      $(this).prop('contenteditable', false)
    });
  });

Answer 2

为每行命名tr数字 - 例如row1，row2，并将类添加到可能可编辑的td .tdCanEdit，然后进行编辑相应命名的按钮，即button1，button2。然后创建一个函数，它单击按钮 - 提取它的数字。使用此数字可获取行ID。查找行中子项中的每个.tdCanEdit分类元素。将它们添加到.contenteditable课程中。

当然，完成后删除所有.contenteditable课程。

避免($(this).html() == 'Edit')检查。而是使用类（向按钮添加一些额外的类）。

使用编辑按钮jquery在表格中进行内联编辑

2 个答案: