Question

我正在尝试创建一个工具栏来修改表table_content_inv。

列管理有效，但无论是添加还是删除，都是导致我出现问题的行。这是因为我指定了提示和正文，这会导致索引出现问题。当我选择thead元素（行索引0）时，会将其添加到tbody（行索引0）中-我知道是我指定了该元素，但我不知道如何进行操作。

我使用函数.index（）获取tds的索引，而不管理元素是在thead还是tbody中。我应该更改从td元素检索索引（或其他内容）的方式还是以某种方式添加事实，即该元素位于thead或tbody中？

//set selected row
var rowIndex = '';
$(document).on('click', '#table_content_inv td', function() {
  rowIndex = $(this).closest('tr').index();
});

//delete selected row 
$(document).on('click', '#button_del_row', function() {
  $('#table_content_inv > tbody > tr').eq(rowIndex).remove();
});

//add row to table
$(document).on('click', '#button_add_row', function() {
  var indexNewRow = rowIndex + 1;
  var newRow = '<tr>';

  var colCount = document.getElementById('table_content_inv').rows[0].cells.length;
  for (i = 0; i < colCount; i++) {
    newRow += '<td>new entry</td>';
  }
  newRow += '</tr>';

  $('#table_content_inv > tbody > tr').eq(rowIndex).after(newRow);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_content_inv">
  <thead>
    <tr>
      <td>entry</td>
      <td>entry</td>
      <td>entry</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>entry</td>
      <td>entry</td>
      <td>entry</td>
    </tr>
    <tr>
      <td>entry</td>
      <td>entry</td>
      <td>entry</td>
    </tr>
  </tbody>
</table>
<div id="toolbar-content" class="toolbar-content">
    <button id="button_add_row" class="button button-secondary" type="button">Ajout ligne</button>                
    <button id="button_del_row" class="button button-secondary" type="button">Supprimer ligne</button>
</div>

Answer 1

不要使用index() ...，我建议您使用一个类来“选择”一行。它甚至可以用来突出显示它。而且还可以通过添加/删除处理程序来定位它。

请参阅下文。

请注意，我在行单击选择器中添加了tbody。因此无法选择标题。

//set selected row
$(document).on('click', '#table_content_inv tbody td', function() { 
  // Some highlighting... ;)
  $("tr").removeClass("selected");
  $(this).closest('tr').addClass("selected");
});

//delete selected row using the .selected class
$(document).on('click', '#button_del_row', function() {
  $(".selected").remove();
});

//add row to table after the .selected class
$(document).on('click', '#button_add_row', function() {

  var newRow = '<tr>';
  var colCount = document.getElementById('table_content_inv').rows[0].cells.length;
  for (i = 0; i < colCount; i++) {
    newRow += '<td>new entry</td>';
  }
  newRow += '</tr>';

  $(".selected").after(newRow);
  // Remove the highlighting.
  $("tr").removeClass("selected");
});

.selected{
  background:yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_content_inv">
  <thead>
    <tr>
      <td>header</td>
      <td>header</td>
      <td>header</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>entry1</td>
      <td>entry1</td>
      <td>entry1</td>
    </tr>
    <tr>
      <td>entry2</td>
      <td>entry2</td>
      <td>entry2</td>
    </tr>
  </tbody>
</table>

<div id="toolbar-content" class="toolbar-content">
    <button id="button_add_row" class="button button-secondary" type="button">Ajout ligne</button>                
    <button id="button_del_row" class="button button-secondary" type="button">Supprimer ligne</button>
</div>

考虑thead和tbody，添加具有td索引的行

1 个答案: