使 HTML 表格中的所有列都可编辑，除了一个

Question

我有一个带有编辑按钮的 HTML 表格。单击编辑按钮时，它允许该行变为可编辑。现在整行都是可编辑的，但是，我希望 MR_ID 行不可编辑。我怎样才能做到这一点？我在我的代码中尝试了一些东西，但它似乎不起作用。

如果我需要提供更多代码，请告诉我，我会提供的。

这是我的 if 语句的开头，我认为问题应该是：

  $(document).on("click", "#html_master .edit", function () {
  var $this = $(this);
  var tds = $this.closest('tr').find('td').filter(function () {
    return $(this).find('.edit').length === 0;
  });
  if ($this.val() === 'Edit') {
    $this.val('Save');
   if($this.id != '.mr_id'){
        tds.prop('contenteditable', true);
   }
}

表格的 HTML/PHP：

<?php
/* Foreach loop that brings in information to populate table */
foreach ($dbh->query($sql) as $rows){
    ?>
    <tr id="<?php echo intval ($rows['MR_ID'])?>">
        <td class="mr_id" id="<?php echo intval ($rows['MR_ID'])?>" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
        <td class="mr_name" id="mr_name-<?php echo intval ($rows['MR_ID'])?>" name="field" contenteditable="false"><?php echo $rows['MR_Name']?></td>
        <td class="buyer_id" id="buy_id<?php echo intval ($rows['MR_ID'])?>" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
        <td class="poc_n" id="poc_n-<?php echo intval ($rows['MR_ID'])?>" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>     
        <td class="poc_e" id="poc_e-<?php echo intval ($rows['MR_ID'])?>" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
        <td class="poc_p" id="poc_p-<?php echo intval ($rows['MR_ID'])?>" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
        <td><input type="button" class="edit" name="edit" value="Edit">
    </tr>
 <?php
  }
 ?>

Answer 1

您可以将其直接放入您的初始查找语句中。

var tds = $this.closest('tr').find('td').not('.mr_id').filter(function () {
  return $(this).find('.edit').length === 0;
})

另一个选项，如果编辑单元格总是最后一个，则将其捆绑到 not 语句中

var tds = $this.closest('tr').find('td').not('.mr_id, :last-child')

Answer 2

只需扩展您的过滤器以不包括 mr_id 列：

$(document).on("click", "#html_master .edit", function() {
  var $this = $(this);

  var tds = $this.closest('tr').children().filter(function() {
    var $thisTd = $(this);
    return $thisTd.find('.edit').length === 0 && !$thisTd.hasClass('mr_id');
  });

  if ($this.val() === 'Edit') {
    $this.val('Save');
    tds.prop('contenteditable', true);
  }
});