Question

applicationDidFinishLaunchingWithOptions

$('.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");
      }

    });

  });
});

我要在这里实现的是，当我们单击“编辑”按钮时，第一，第二和第三列数据以及最后一个字段数据应该不可编辑，但是这里发生的是第一行所需的字段是可编辑的，但是在单击第二行和第三行的编辑按钮时，其他所有内容都是可编辑的。我试图选择具有不同类的tr的第一个同级，并使它们的第一，第二，第三和最后一个字段数据不可编辑。可能是由于选择错误引起的。没有使用类，有什么办法吗？这是我的代码段

Answer 1

使用var tdSet检查 DOM 选择是否有奇数行和偶数行。

使用以下代码段。

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

选择每个不同类别的第一个同级

1 个答案: