Выберите первый брат каждого из разных классов

Question

$('.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() {
    var index = $(this).index();
if(index==0)
{

  var tdSet = $(this).find($("td").not('td:first-child').not('td:nth-child(2)').not('td:nth-child(3)').not(':last-child'));
}
else

  var tdSet=$(this).find($("td"));




    tdSet.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 table0 table2 table-striped table-dark table-bordered" id="myTable">
            <thead>
               <tr>
                  <th scope="col" rowspan="2">S.N</th>
                  <th scope="col" rowspan="2">S.N</th>
                  <th scope="col" rowspan="2">S.N</th>
                  <th scope="col" colspan="5">S.N</th>
                  <th scope="col" colspan="5">S.N</th>
                  <th scope="col" rowspan="2">S.N</th>
                  <th scope="col" rowspan="2">S.N</th>
                  <th scope="col" rowspan="2">S.N</th>
     
               </tr>
                 <tr>
                  <th scope="col">S.N</th>
                  <th scope="col">S.N</th>
                    <th scope="col">S.N</th>
                    <th scope="col">S.N</th>
                  <th scope="col">S.N</th>
                    <th scope="col">S.N</th>
                    <th scope="col">S.N</th>
                    <th scope="col">S.N</th>
                    <th scope="col">S.N</th>
                  <th scope="col">S.N</th>
               </tr>

            </thead>
            <tbody>

                <tr class="set0">
                  <td>0</td>
                  <td>20</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td >21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21
                  </td>
                  <td>  <button type="button" data-set="0" class="btn btn-primary editbtn3">
                     Edit
                     </button>
                   
                  </td>
               </tr>
               
               <tr class="set1">
                  <td rowspan="2">1</td>
                  <td rowspan="2">20</td>
                  <td rowspan="2">21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td >21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td  rowspan="2">21st August</td>
                  <td  rowspan="2">21</td>
                  <td  rowspan="2">21st August</td>
                  <td  rowspan="2">21</td>
                  <td  rowspan="2">21st August</td>
                  <td rowspan="2">21</td>
                  <td rowspan="2">21
                  </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>
                  <td>21</td>
                  <td>21st August</td>
                  <td>21</td>

                 
               </tr>
           
             
               
                        <tr class="set2">
                  <td rowspan="3">2</td>
                  <td rowspan="3">20</td>
                  <td rowspan="3">21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td >21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td  rowspan="3">21st August</td>
                  <td  rowspan="3">21</td>
                  <td  rowspan="3">21st August</td>
                  <td  rowspan="3">21</td>
                  <td  rowspan="3">21st August</td>
                  <td rowspan="3">21</td>
                  <td rowspan="3">21
                  </td>
                  <td rowspan="3" >  <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>
                  <td>21</td>
                  <td>21st August</td>
                  <td>21</td>

                 
               </tr>
               <tr class="set2">
                  
                  <td>21</td>
                  <td>21st August</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                 
               
                 
                
               </tr>
               <!--     <tr class="set2">
                  
                  <td>21</td>
                  <td>21st August</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                 
               
                 
                
               </tr> -->
               
                        <tr class="set3">
                  <td rowspan="4">3</td>
                  <td rowspan="4">20</td>
                  <td rowspan="4">21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td >21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td  rowspan="4">21st August</td>
                  <td  rowspan="4">21</td>
                  <td  rowspan="4">21st August</td>
                  <td  rowspan="4">21</td>
                  <td  rowspan="4">21st August</td>
                  <td rowspan="4">21</td>
                  <td rowspan="4">21
                  </td>
                  <td rowspan="4" >  <button type="button" data-set="3" class="btn btn-primary editbtn3">
                     Edit
                     </button>
                   
                  </td>
               </tr>
               <tr class="set3">
               
                
                                       <td>21</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                  <td>21</td>

                 
               </tr>
               <tr class="set3">
                  
                  <td>21</td>
                  <td>21st August</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                 
               
                 
                
               </tr>
                   <tr class="set3">
                  
                  <td>21</td>
                  <td>21st August</td>
                  <td>21st August</td>
                  <td>21</td>
                  <td>21st August</td>
                 
               
                 
                
               </tr>
               
               
            </tbody>
         </table>
      </div>

Я пытаюсь понять, что когда мы нажимаем кнопку редактирования, данные первого, второго и третьего столбца и данные последнего поля должны быть недоступны для редактированияно что здесь происходит, так это то, что для первой строки нужные поля доступны для редактирования, но при нажатии кнопки редактирования 2-й строки и 3-й строки все остальное можно редактировать. Я пытался выбрать первую сестру tr, имеющую разные классы, и сделать ихданные первого, второго, третьего и последнего поля недоступны для редактирования.Может быть проблема из-за неправильного выбора.Есть ли способ сделать это без использования класса?Вот мой фрагмент кода

Answer 1

check DOM выбор с var tdSet для нечетных и четных строк.

используйте приведенный ниже фрагмент кода.

$('.edit').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() {
    var index = $(this).index();
    var tdSet = $(this).find($("td")).not(':first').not('td:eq(0)').not(':last');
    if (index % 2) {
      tdSet = $(this).find($("td")).not('td:eq(0)');
    }

    tdSet.each(function() {
      if (edit) {
        $(this).prop('contenteditable', true).css({
          'background': '#fff',
          'color': '#000'
        })
      } else {
        $(this).prop('contenteditable', false).removeAttr("style");
      }
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<table class="table table0  table-striped table-dark table-bordered" id="myTable">
  <thead>
    <tr>
      <th scope="col">abc</th>
      <th scope="col">cde</th>
      <th scope="col">fgh</th>
      <th scope="col">fgh</th>
      <th scope="col">fgh</th>
      <th scope="col">fgh</th>
    </tr>

  </thead>
  <tbody>
    <tr class="set1">
      <td rowspan="2">abc</td>
      <td>abc</td>
      <td>abc</td>
      <td rowspan="2">abc</td>
      <td>abc</td>
      <td rowspan="2"> 
        <button type="button" data-set="1" class="btn btn-primary edit">
          Edit
        </button>
      </td>
    </tr>
    <tr class="set1">
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>
    <tr class="set2">
      <td rowspan="2">abc</td>
      <td>abc</td>
      <td>abc</td>
      <td rowspan="2">abc</td>
      <td>abc</td>
      <td rowspan="2">
        <button type="button" data-set="2" class="btn btn-primary edit">
          Edit
        </button>
      </td>
    </tr>
    <tr class="set2">
      <td>abc</td>
      <td>abc</td>
      <td>abc</td>
    </tr>

  </tbody>
</table>