I have a table that includes both a "Edit/Save" and "Delete" button. Whenever I click the "Edit" button, it makes the rows editable and changes to a "Save" button so I can save changes. However, when I do this, it makes every cell editable and only the first row does the edit button work. It does not work for the second row, third row, etc.
My question is a two parter...
How can I make certain cells in the row not editable and the others editable? I am specifically wanting the first cell "MR_ID" to not be editable.
How can I get the Edit function working for multiple rows instead of only the first row?
Relevant HTML/PHP code:
<?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>
Relevant Javascript code:
$(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);
}
});
});