使列不可编辑，同时使其他列可编辑

Question

I have a table with multiple columns and multiple rows and also an edit button. I want to make 2 columns, MR_ID and MR_Name, non-editable while keeping the rest of the columns editable once the edit button has been clicked. I want to stay away from .not() as it negatively affects my UPDATE function. What other way can I accomplish this?

HTML/PHP of the table:

<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

You can create this css class and add it using jquery in the correct place

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

Or if you want to hide it use

 .disable_td{
         display:none;
    }

at the top of the function right after

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

add

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