使用jquery使用相同的按钮编辑多行

Posted 2021-03-27

我正在尝试使用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>

在这里，我只能编辑单行。我是否必须使用循环进行多行编辑，还是有另一种解决方案？

答案

$(this).parents('tr')只能通过按钮找到行上的单元格。

如果你有套，我建议使用data-attr - 我正在测试rowspan以消除应该单独留下的单元 - 你可以使用类或其他选择方式。由于行扫描，您无法使用：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使用相同的按钮编辑多行的主要内容，如果未能解决你的问题，请参考以下文章

在 Android 片段中使用 onBackPressed()

android片段表格布局

Sublime Text 3的快捷键

jquery中有datagrid怎么设置编辑和删除按钮

使用jquery单击按钮时可编辑的引导表行

IOS滑动删除和多行编辑导致按钮名称设置为默认