Rataiczak24 Rataiczak24 - 5 days ago 4
HTML Question

Make All Columns in HTML Table Editable Except One

I have an HTML table that has an edit button. When the edit button is clicked, it allows the row to become editable. Right now the entire row is editable, however, I am wanting the MR_ID row to NOT BE EDITABLE. How can I do this? I tried something in my code but it doesn't seem to be working.

If I need to provide any more code, please let me know and I will do so.

This is the beginning of my if statement where I believe the problem should be:

$(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 for the table:

<?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

Just extend your filter to not include the mr_id column:

$(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);
  }
});