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>

使用jQuery使用同一按钮编辑多行

1 个答案: