Select 每个不同的第一个兄弟 类

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 行的编辑按钮时，其他所有内容都是 editable.I 正在尝试 select 具有不同 classes 的 tr 的第一个兄弟姐妹并制作他们的第一个，第二、第三和最后一个字段数据不可编辑。可能问题是由于错误的 selection。有没有不使用 class 的方法呢？ 这是我的代码片段

Answer 1

检查 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>