Search code examples
javascriptphphtmlhtml-tablecontenteditable

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

Solution

  • 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);
      }
    });