Button and ContentEditable Functions

Question

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

1. 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.

2. 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);
        }
    });
    });

Answer 1

Your main problem is: the IDs must be unique.

So I suggest you to convert the IDs in classes.

How to not make editable 'mr_id" cells? You are doing well. Add in your filter:

$(this).is(':not(.mr_id)')

The snippet:

function deleteRow(obj) {
  $(obj).closest('tr').remove();
}

$(document).ready(function() {
  $('.edit').on('click', function(e) {
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
      return $(this).find('.edit').length === 0 && $(this).is(':not(.mr_id)');
    });
    if ($this.html() === 'Edit') {
      $this.html('Save');
      tds.css('background-color', 'grey').prop('contenteditable', true);
    } else {
      $this.html('Edit');
      tds.css('background-color', 'white').prop('contenteditable', false);
    }
  });
});

table, th, td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <tr>
        <td class="mr_id" contenteditable="false">1111</td>
        <td class="mr_name" contenteditable="false">1111</td>
        <td class="buyer_id" contenteditable="false">1111</td>
        <td class="poc_n" contenteditable="false">1111</td>
        <td class="poc_e" contenteditable="false">111</td>
        <td class="poc_p" contenteditable="false">111</td>
        <td><button class="edit" name="edit">Edit</button>
            <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td>
    </tr>
    <tr>
        <td class="mr_id" contenteditable="false">1111</td>
        <td class="mr_name" contenteditable="false">1111</td>
        <td class="buyer_id" contenteditable="false">1111</td>
        <td class="poc_n" contenteditable="false">1111</td>
        <td class="poc_e" contenteditable="false">111</td>
        <td class="poc_p" contenteditable="false">111</td>
        <td><button class="edit" name="edit">Edit</button>
            <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td>
    </tr>
    <tr>
        <td class="mr_id" contenteditable="false">1111</td>
        <td class="mr_name" contenteditable="false">1111</td>
        <td class="buyer_id" contenteditable="false">1111</td>
        <td class="poc_n" contenteditable="false">1111</td>
        <td class="poc_e" contenteditable="false">111</td>
        <td class="poc_p" contenteditable="false">111</td>
        <td><button class="edit" name="edit">Edit</button>
            <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td>
    </tr>
    <tr>
        <td class="mr_id" contenteditable="false">1111</td>
        <td class="mr_name" contenteditable="false">1111</td>
        <td class="buyer_id" contenteditable="false">1111</td>
        <td class="poc_n" contenteditable="false">1111</td>
        <td class="poc_e" contenteditable="false">111</td>
        <td class="poc_p" contenteditable="false">111</td>
        <td><button class="edit" name="edit">Edit</button>
            <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td>
    </tr>
</table>

Answer 2

Have a look at the jquery .not function to remove specific elements from your selection.

Your function is only working for the first row because you are using IDs on the tds. You should only have one item with a specific id on a page. Change these to classes and your code should work. You are also specifically targeting the closest row and so will only get the first.

Once you have fixed up these things your code should look something like:

var tds = $this.find('tr td').not('.mr_id').filter ....