Javascript 按钮和内容可编辑功能

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

我的问题是两个部分

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

如何使编辑函数在多行而不是第一行中工作

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

查看jquery以从选择中删除特定元素

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

一旦您解决了这些问题，您的代码应该如下所示：

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

查看jquery以从选择中删除特定元素

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

一旦您解决了这些问题，您的代码应该如下所示：

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

---

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

因此，我建议您在类中转换ID

如何使“mr_id”单元格不可编辑？您做得很好。请添加您的筛选器：

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

片段：

函数删除行（obj）{
$（obj）.closest（'tr'）.remove（）；
}
$（文档）.ready（函数（）{
$（'.edit'）。在（'click'，函数（e）上{
var$this=$（this）；
var tds=$this.closest（'tr'）.find（'td'）.filter（函数（）{
返回$（this）.find（'.edit'）.length==0&&$（this）.is（':not（.mr_id）'）；
});
如果（$this.html（）=='Edit'）{
$this.html（'Save'）；
css（'background-color'，'grey'）.prop（'contenteditable'，true）；
}否则{
$this.html（'Edit'）；
css（'background-color'，'white'）.prop（'contenteditable'，false）；
}
});
})；

表，th，td{
边框：1px纯黑；
}

1111
1111
1111
1111
111
111
编辑
删除
1111
1111
1111
1111
111
111
编辑
删除
1111
1111
1111
1111
111
111
编辑
删除
1111
1111
1111
1111
111
111
编辑
删除

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

因此，我建议您在类中转换ID

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

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

片段：

函数删除行（obj）{
$（obj）.closest（'tr'）.remove（）；
}
$（文档）.ready（函数（）{
$（'.edit'）。在（'click'，函数（e）上{
var$this=$（this）；
var tds=$this.closest（'tr'）.find（'td'）.filter（函数（）{
返回$（this）.find（'.edit'）.length==0&&$（this）.is（':not（.mr_id）'）；
});
如果（$this.html（）=='Edit'）{
$this.html（'Save'）；
css（'background-color'，'grey'）.prop（'contenteditable'，true）；
}否则{
$this.html（'Edit'）；
css（'background-color'，'white'）.prop（'contenteditable'，false）；
}
});
});
表，th，td{
边框：1px纯黑；
}

1111
1111
1111
1111
111
111
编辑
删除
1111
1111
1111
1111
111
111
编辑
删除
1111
1111
1111
1111
111
111
编辑
删除
1111
1111
1111
1111
111
111
编辑
删除
您已经执行了deleteRow（此），没有执行editRow（此）的任何原因？您已经执行了deleteRow（此），没有执行editRow（此）的任何原因？谢谢您的回答。这修复了保存按钮功能，但我仍然有问题的内容编辑功能…它仍然让我编辑先生的id单元格。不管怎样，我得到了它的工作。我忘了在我的HTML代码中将mr_id更改为类…谢谢！谢谢你的回答。这修复了保存按钮功能，但我仍然有问题的内容编辑功能…它仍然让我编辑先生的id单元格。不管怎样，我得到了它的工作。我忘了在我的HTML代码中将mr_id更改为类…谢谢！