我有一个包含“编辑/保存”和“删除”按钮的表格。每当我单击“编辑”按钮时，它都会使行可编辑并更改为“保存”按钮，以便我可以保存更改。但是，当我这样做时，它使每个单元格都可编辑，并且只有第一行的编辑按钮起作用。它不适用于第二行、第三行等。
我的问题是两个人......
如何使行中的某些单元格不可编辑而其他单元格可编辑？我特别希望第一个单元格“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>
相关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);
}
});
});
最佳答案
看看 jquery .not function从您的选择中删除特定元素。
您的函数仅适用于第一行，因为您在 tds 上使用 ID。页面上应该只有一个具有特定 ID 的项目。将它们更改为类，您的代码应该可以工作。您还专门针对最近的行，因此只会获得第一行。
一旦你解决了这些问题，你的代码应该看起来像这样:
var tds = $this.find('tr td').not('.mr_id').filter ....
关于javascript - 按钮和内容可编辑功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39793423/