Javascript 使HTML表中除一列之外的所有列都可编辑

我有一个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
  }
 ?>

你可以把它放在你最初的find语句中

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

只需扩展过滤器，使其不包括
mr\u id
列：

$（文档）。在（“单击”、“#html_master.edit”上，函数（）{
var$this=$（this）；
var tds=$this.closest（'tr'）.children（）.filter（function（））{
var$thisTd=$（本）；
返回$thisTd.find（'.edit'）。长度===0&！$thisTd.hasClass（'mr_id'）；
});
如果（$this.val（）=='Edit'）{
$this.val（'Save'）；
tds.prop（'contenteditable'，true）；
}
});
什么是
$this
。如果它是一个jquery对象，那么您无法通过执行
来获取id。id
看起来也像是您与一个类进行比较，而不仅仅是
'mr_id'
（没有前导点）我在javascript中添加了一些额外的代码，以帮助您在单击编辑时了解
$this
是什么，您是否希望每个
td
但是
mr_id
都是可编辑的？是的，这是正确的。如果您已经在使用jQuery，则无需执行所有这些操作。一个简单的
.not
就是很多cleaner@jmcgriz，他已经在使用一个过滤器-也可以扩展它-您的tds也包括.edit列。我只是在他已有的基础上进行构建，而不是替换它。为了清晰起见，我将进行编辑