按钮和 ContentEditable 函数

Question

我有一个 table，其中包含 "Edit/Save" 和 "Delete" 按钮。每当我单击 "Edit" 按钮时，它都会使行 editable 并更改为 "Save" 按钮，以便我可以保存更改。但是，当我这样做时，它会使每个单元格 editable 并且只有第一行的编辑按钮起作用。它不适用于第二行，第三行等

我的问题是两个人...

如何使行中的某些单元格不是 editable 而其他单元格是 editable？我特别希望第一个单元格 "MR_ID" 不是 editable.
如何让编辑功能适用于多行而不是仅适用于第一行？

相关Javascript代码：

  $(document).ready(function() {
    $('#edit').click(function() {
        var $this = $(this);
        var tds = $this.closest('tr').find('td').filter(function() {
            return $(this).find('#edit').length === 0;
        });
        if ($this.html() === 'Edit') {
            $this.html('Save');
            tds.prop('contenteditable', true);
        } else {
            $this.html('Edit');
            tds.prop('contenteditable', false);
        }
    });
    });

Answer 1

查看 jquery .not function 以从您的选择中删除特定元素。

您的函数仅适用于第一行，因为您在 tds 上使用了 ID。您应该在一个页面上只有一个具有特定 id 的项目。将这些更改为类并且您的代码应该可以工作。您还特别针对最近的行，因此只会得到第一行。

一旦你解决了这些问题，你的代码应该类似于：

var tds = $this.find('tr td').not('.mr_id').filter ....

Answer 2

您的主要问题是：ID 必须是唯一的。

所以我建议你转换类中的ID。

如何制作不可编辑的“mr_id”单元格？你做的很好。添加你的过滤器：

$(this).is(':not(.mr_id)')

片段：

function deleteRow(obj) {
  $(obj).closest('tr').remove();
}

$(document).ready(function() {
  $('.edit').on('click', function(e) {
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
      return $(this).find('.edit').length === 0 && $(this).is(':not(.mr_id)');
    });
    if ($this.html() === 'Edit') {
      $this.html('Save');
      tds.css('background-color', 'grey').prop('contenteditable', true);
    } else {
      $this.html('Edit');
      tds.css('background-color', 'white').prop('contenteditable', false);
    }
  });
});

table, th, td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <tr>
        <td class="mr_id" contenteditable="false">1111</td>
        <td class="mr_name" contenteditable="false">1111</td>
        <td class="buyer_id" contenteditable="false">1111</td>
        <td class="poc_n" contenteditable="false">1111</td>
        <td class="poc_e" contenteditable="false">111</td>
        <td class="poc_p" contenteditable="false">111</td>
        <td><button class="edit" name="edit">Edit</button>
            <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td>
    </tr>
    <tr>
        <td class="mr_id" contenteditable="false">1111</td>
        <td class="mr_name" contenteditable="false">1111</td>
        <td class="buyer_id" contenteditable="false">1111</td>
        <td class="poc_n" contenteditable="false">1111</td>
        <td class="poc_e" contenteditable="false">111</td>
        <td class="poc_p" contenteditable="false">111</td>
        <td><button class="edit" name="edit">Edit</button>
            <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td>
    </tr>
    <tr>
        <td class="mr_id" contenteditable="false">1111</td>
        <td class="mr_name" contenteditable="false">1111</td>
        <td class="buyer_id" contenteditable="false">1111</td>
        <td class="poc_n" contenteditable="false">1111</td>
        <td class="poc_e" contenteditable="false">111</td>
        <td class="poc_p" contenteditable="false">111</td>
        <td><button class="edit" name="edit">Edit</button>
            <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td>
    </tr>
    <tr>
        <td class="mr_id" contenteditable="false">1111</td>
        <td class="mr_name" contenteditable="false">1111</td>
        <td class="buyer_id" contenteditable="false">1111</td>
        <td class="poc_n" contenteditable="false">1111</td>
        <td class="poc_e" contenteditable="false">111</td>
        <td class="poc_p" contenteditable="false">111</td>
        <td><button class="edit" name="edit">Edit</button>
            <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td>
    </tr>
</table>

按钮和 ContentEditable 函数

Button and ContentEditable Functions

html

javascript

php

jquery

contenteditable