jquery实现表格内点击按钮删除该行数据

可以通过以下步骤实现：

1. 给表格中的每一行添加一个删除按钮，可以使用HTML代码实现：

<tr>
  <td>数据1</td>
  <td>数据2</td>
  <td><button class="delete-btn">删除</button></td>
</tr>

2. 使用jQuery绑定按钮的点击事件，获取该行的索引，并从表格中删除该行：

$(document).on("click", ".delete-btn", function() {
  // 获取当前行
  var $row = $(this).closest("tr");
  // 获取当前行的索引
  var index = $row.index();
  // 从表格中删除该行
  $row.remove();
});

这样，当用户点击某一行的删除按钮时，该行将被从表格中删除。

相关问题

jquery实现表格增删改查

好的，以下是一个简单的示例代码，用于实现表格增删改查的功能，使用 jQuery 和 AJAX 技术：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据会动态生成 -->
  </tbody>
</table>

<form id="addForm">
  <input type="text" name="name" placeholder="Name">
  <input type="number" name="age" placeholder="Age">
  <button type="submit">Add</button>
</form>

<form id="editForm">
  <input type="hidden" name="id">
  <input type="text" name="name" placeholder="Name">
  <input type="number" name="age" placeholder="Age">
  <button type="submit">Update</button>
</form>

jQuery 代码：

// 显示所有数据
function showData() {
  $.ajax({
    url: 'api.php', // 后端接口地址
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      var tbody = $('#myTable tbody');
      tbody.empty(); // 先清空表格数据
      $.each(data, function(index, item) {
        var tr = $('<tr>').appendTo(tbody);
        $('<td>').text(item.id).appendTo(tr);
        $('<td>').text(item.name).appendTo(tr);
        $('<td>').text(item.age).appendTo(tr);
        var td = $('<td>').appendTo(tr);
        $('<button>').text('Edit').on('click', function() {
          // 点击 Edit 按钮时，显示编辑表单
          $('#editForm [name=id]').val(item.id);
          $('#editForm [name=name]').val(item.name);
          $('#editForm [name=age]').val(item.age);
        }).appendTo(td);
        $('<button>').text('Delete').on('click', function() {
          // 点击 Delete 按钮时，删除该行数据
          $.ajax({
            url: 'api.php?id=' + item.id,
            type: 'DELETE',
            success: function() {
              showData(); // 数据删除成功后，重新显示所有数据
            }
          });
        }).appendTo(td);
      });
    }
  });
}

// 添加数据
$('#addForm').on('submit', function(event) {
  event.preventDefault(); // 阻止表单提交
  $.ajax({
    url: 'api.php',
    type: 'POST',
    data: $(this).serialize(),
    success: function() {
      // 数据添加成功后，清空表单并重新显示所有数据
      $('#addForm')[0].reset();
      showData();
    }
  });
});

// 更新数据
$('#editForm').on('submit', function(event) {
  event.preventDefault(); // 阻止表单提交
  $.ajax({
    url: 'api.php',
    type: 'PUT',
    data: $(this).serialize(),
    success: function() {
      // 数据更新成功后，清空表单并重新显示所有数据
      $('#editForm')[0].reset();
      showData();
    }
  });
});

// 页面加载完成后，显示所有数据
$(document).ready(function() {
  showData();
});

以上代码中，我们使用了一个名为 `api.php` 的后端接口，用于处理增删改查的请求。你需要根据实际情况自行编写这个接口。

layui数据表格 添加 删除行的实现

Layui数据表格的添加和删除行可以通过以下步骤实现：

1. 添加行：通过表格的render方法中的done回调函数，在表格渲染完成后，可以通过jQuery或原生JavaScript等方式，向表格中添加行数据。

2. 删除行：通过表格的on方法，监听删除按钮的点击事件，获取当前行的数据，然后通过jQuery或原生JavaScript等方式，将该行数据从表格中删除。

具体实现可以参考以下代码示例：

添加行：

// 渲染表格
table.render({
  // ...
  done: function (res, curr, count) {
    // 在表格渲染完成后，添加新行数据
    var newRowData = {id: 4, name: '张三', age: 22, sex: '男'};
    var $tbody = $('#demo').next('.layui-table-box').find('.layui-table-body tbody');
    var trHtml = '<tr data-index="' + (count++) + '">';
    trHtml += '<td data-field="id"><div class="layui-table-cell laytable-cell-1-id">' + newRowData.id + '</div></td>';
    trHtml += '<td data-field="name"><div class="layui-table-cell laytable-cell-1-name">' + newRowData.name + '</div></td>';
    trHtml += '<td data-field="age"><div class="layui-table-cell laytable-cell-1-age">' + newRowData.age + '</div></td>';
    trHtml += '<td data-field="sex"><div class="layui-table-cell laytable-cell-1-sex">' + newRowData.sex + '</div></td>';
    trHtml += '</tr>';
    $tbody.append(trHtml);
  }
});

删除行：

// 监听删除按钮的点击事件
table.on('tool(test)', function (obj) {
  if (obj.event === 'delete') {
    // 获取当前行的数据
    var rowData = obj.data;
    // 通过jQuery或原生JavaScript等方式，将该行数据从表格中删除
    obj.del();
  }
});