Q:

edit multiple rows using same button using jquery

I'm trying to edit multiple rows using one button using jquery. Since I've used row span so when I click on edit button,only the value of single row is editable. Here is the code snippet

$('.editbtn3').click(function() {
  var edit = $(this).text().trim() == 'Edit';
  $(this).html($(this).text().trim() == 'Edit' ? 'Save' : 'Edit');
  $(this).parents('tbody').find($("tr.set"+$(this).data("set")+">td").not(":nth-child(1),:last-child")).each(function() {
    if (edit) {
      $(this).prop('contenteditable', true).css({
        'background': '#fff',
        'color': '#000'
      })
    } else {
      $(this).prop('contenteditable', false).removeAttr("style");
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-dark table-bordered" id="myTable">
  <thead>
    <tr>
      <th scope="col">S.N</th>
      <th scope="col">abc</th>
      <th scope="col">def</th>
      <th scope="col">option</th>
    </tr>
  </thead>
  <tbody>
    <tr class="set1">
      <th scope="row" rowspan="2">1</th>
      <td>20</td>
      <td>21st August</td>
      <td rowspan="2" ><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>
      </td>
    </tr>
    <tr class="set1">
      <td>21</td>
      <td>21st August</td>
    </tr>
    <tr class="set2">
      <th scope="row" rowspan="2">2</th>
      <td>20</td>
      <td>21st August</td>
      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>
      </td>
    </tr>
    <tr class="set2">
      <td>21</td>
      <td>21st August</td>
    </tr>
  </tbody>

Here I am only able to edit single row. Do I have to use loop for multiple rows editing or is there another solution?

A:

$(this).parents('tr') will ONLY find the cells on the row with the button. 
If you have sets, I suggest using data-attr - I am testing for rowspan to eliminate the cells that should be left alone - you can use a class or other ways of selecting. Because of the rowspans you cannot use the :first-child and :last-child selectors.

$('.editbtn3').click(function() {
  var edit = $(this).text().trim() == 'Edit';
  $(this).html($(this).text().trim() == 'Edit' ? 'Save' : 'Edit');
  var $rows = $("tr.set" + $(this).data("set"));
  $rows.each(function() {
    $(this).find("td").each(function() {
      if ($(this).attr("rowspan")) return false;
      if (edit) {
        $(this).prop('contenteditable', true).css({
          'background': '#fff',
          'color': '#000'
        })
      } else {
        $(this).prop('contenteditable', false).removeAttr("style");
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-dark table-bordered" id="myTable">
  <thead>
    <tr>
      <th scope="col">S.N</th>
      <th scope="col">abc</th>
      <th scope="col">def</th>
      <th scope="col">option</th>
    </tr>
  </thead>
  <tbody>
    <tr class="set1">
      <th scope="row" rowspan="2">1</th>
      <td>20</td>
      <td>20th August</td>
      <td rowspan="2"><button type="button" data-set="1" class="btn btn-primary editbtn3">Edit</button>
      </td>
    </tr>
    <tr class="set1">
      <td>21</td>
      <td>21st August</td>
    </tr>
    <tr class="set2">
      <th scope="row" rowspan="2">2</th>
      <td>22</td>
      <td>22nd August</td>
      <td rowspan="2"><button type="button" data-set="2" class="btn btn-primary editbtn3">Edit</button>
      </td>
    </tr>
    <tr class="set2">
      <td>23</td>
      <td>23rd August</td>
    </tr>
  </tbody>
</table>

