редактировать несколько строк, используя одну и ту же кнопку, используя jquery

Question

Я пытаюсь редактировать несколько строк, используя одну кнопку, используя jquery.Поскольку я использовал диапазон строк, поэтому, когда я нажимаю кнопку редактирования, редактируется только значение одной строки.Вот фрагмент кода

$('.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>

Здесь я могу редактировать только одну строку.Нужно ли использовать цикл для редактирования нескольких строк или есть другое решение?

Answer 1

$(this).parents('tr') ТОЛЬКО найдет ячейки в строке кнопкой.

Если у вас есть наборы, я предлагаю использовать data-attr - я проверяю число строк, чтобы исключить ячейки, которые следует оставить в одиночестве - вы можете использовать класс или другие способы выбора.Из-за интервалов между рядами нельзя использовать селекторы: first-child и: last-child.

$('.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>