考虑到 thead 和 tbody 添加具有 td 索引的行答案

【问题标题】：Add rows with td indexes considering thead and tbody考虑到 thead 和 tbody 添加具有 td 索引的行
【发布时间】：2019-07-20 04:51:33
【问题描述】：

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

列管理有效，但导致我出现问题的是行，无论是添加还是删除。这是因为我指定了一个 thead 和一个 tbody 会导致 indexes 出现问题。当我选择 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>

【问题讨论】：

HTML 中的按钮在哪里？
刚刚添加@RoryMcCrossan

标签： jquery

【解决方案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>

【讨论】：