Button 和 ContentEditable 函数

Question

我有一个包含“编辑/保存”和“删除”按钮的表格。每当我单击“编辑”按钮时，它都会使行可编辑并更改为“保存”按钮，以便我可以保存更改。但是，当我这样做时，它会使每个单元格都可编辑，并且只有第一行的编辑按钮起作用。第二排、第三排等都不起作用

我的问题是两个部分...

1. 如何使行中的某些单元格不可编辑而其他单元格可编辑？我特别希望第一个单元格“MR_ID”不可编辑。

2. 如何让 Edit 功能适用于多行而不是仅适用于第一行？

相关HTML/PHP代码：

<?php
    foreach ($dbh->query($sql) as $rows){
    ?>
    <tr>
        <td id="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
        <td id="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td>
        <td id="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
        <td id="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>     
        <td id="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
        <td id="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
        <td><button id="edit" name="edit">Edit</button>
        <button id="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td>
    </tr>

相关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)')

sn-p：

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>