Сделать столбец не редактируемым, сохраняя другие редактируемые

Question

У меня есть таблица с несколькими столбцами и несколькими строками, а также кнопка редактирования. Я хочу сделать 2 столбца, MR_ID и MR_Name, нередактируемыми, оставив остальные столбцы редактируемыми после нажатия кнопки редактирования. Я хочу держаться подальше от .not(), так как это отрицательно влияет на мою функцию UPDATE. Каким другим способом я могу это сделать?

HTML/PHP таблицы:

<table id="html_master" class="ui-widget ui-widget-content"> 
<thead> 
    <tr class="ui-widget-header"> 
    <td>ID</td> 
    <td>Vendor</td> 
    <td>Buyer ID</td> 
    <td>POC Name</td> 
    <td>POC Email</td> 
    <td>POC Phone</td> 
    <td>Edit</td> 
    </tr> 
</thead> 
<tbody> 


<?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="mr_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 
    } 
?> 
</tbody> 
</table> 

JavaScript:

// ----- Edit Row ----- 

$(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); 
    } 
    } else { 
    var isValid = true; 
    var errors = ''; 
    $('#myDialogBox').empty(); 
    var elements = tds; 
    if (tds.find('input').length > 0) { 
     elements = tds.find('input'); 
    } 
    var dict = {}; 
    elements.each(function (index, element) { 
     var type = $(this).attr('class'); 
     var value = (element.tagName == 'INPUT') ? $(this).val() : $(this).text(); 
     console.log(type); 
     // ----- Switch statement that provides validation for each table cell ----- 
     switch (type) { 
     case "mr_id": 
      dict["MR_ID"] = value; 
      break; 
     case "mr_name": 
      if (value == value.match(/^[a-zA-Z\s]+$/)) { 
       dict["MR_Name"] = value; 
      } 
      break; 
     case "buyer_id": 
      if (!$.isNumeric(value)) { 
      isValid = false; 
      errors += "Please enter a valid Buyer ID\n"; 
      } 
      if (isValid) { 
       dict["Buyer_ID"] = value; 
      } 
      break; 
     case "poc_n": 
      if (value == value.match(/^[a-zA-Z\s]+$/)) { 
       dict["MR_POC_N"] = value; 
      break; 
      } 
      else { 
      isValid = false; 
      errors += "Please enter a valid Name\n"; 
      } 
      break; 
     case "poc_e": 
      if (value == value.match(/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/)) { 
       dict["MR_POC_E"] = value; 
      break; 
      } 
      else { 
      isValid = false; 
      errors += "Please enter a valid Email\n"; 
      } 
      break; 
     case "poc_p": 
      if (value == value.match('^[0-9()+/-]{10,}$')) { 
       dict["MR_POC_P"] = value; 
      break; 
      } 
      else { 
      isValid = false; 
      errors += "Please enter a valid Phone Number\n"; 
      } 
      break; 
     } 
    }) 
    if (isValid) { 
     console.log(dict); 
     $this.val('Edit'); 
     tds.prop('contenteditable', false); 
     var request = $.ajax({ 
      type: "POST", 
      url: "update-copy.php", 
      data: dict 
     }); 

     request.done(function (response, textStatus, jqXHR){ 
      if(JSON.parse(response) == true){ 
      console.log("row updated"); 
      } else { 
      console.log("row failed to updated"); 
      console.log(response); 
      console.log(textStatus); 
      console.log(jqXHR); 
      } 
     }); 

     // Callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown){ 
      // Log the error to the console 
      console.log(textStatus); 
      console.log(jqXHR); 
      console.error(
       "The following error occurred: "+ 
       textStatus, errorThrown 
      ); 
     }); 

     // Callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 

     }); 
    } else { 
     alert(errors); 
    } 
    } 
}); 

Answer 1

Вы можете создать этот класс CSS и добавить его с помощью JQuery в правильном месте

.disable_td{ 
    background-color: #ddd; 
    cursor: not-allowed; 
} 

Или если вы хотите скрыть это, используйте

.disable_td{ 
     display:none; 
    } 

в верхней части функции сразу после

$(document).on("click", "#html_master .edit", function() { 
    var $this = $(this); 

добавить

$(".mr_id").addClass("mr_id disable_td"); 
$(".mr_name").addClass("mr_name disable_td");