在jQuery中添加编辑和删除表格行

在web开发中，表格是一个常见的组件，有时需要添加编辑和删除表格行的功能。本文将介绍如何在jQuery中实现这个功能。

添加表格行

要添加一行到表格中，需要先在表格中创建一个新的行，并将行添加到表格的末尾。以下是一行jQuery代码，可以在表格的最后一行添加一个新行：

$('#table-id tbody').append('<tr><td>Column 1</td><td>Column 2</td></tr>');

这里需要注意的是，id为“table-id”的表格需要包含<tbody>元素。

可以将“Column 1”和“Column 2”替换为实际的表格单元格内容。

编辑表格行

编辑表格行需要提供一个表格单元格的编辑表单，以及一些代码来处理编辑后的值。

以下是一个例子，使用jQuery的事件处理程序来显示编辑表单：

$(document).on('click', '#table-id tbody tr td', function() {
  var currentEle = $(this);
  var value = $(this).html();
  $(this).html('<input type="text" value="' + value + '" />');
  $(this).find('input').focus();
 
  $(this).find('input').blur(function(){
    var new_text = $(this).val();
    currentEle.html(new_text);
  });
});

此代码将在单击表格单元格时显示编辑表单。它将当前单元格的内容替换为<input>元素，并将光标置于文本框中。

当文本框失去焦点时，将使用新值替换单元格。

删除表格行

要删除一行，可以使用以下代码：

$(document).on('click', '#table-id tbody tr td a.remove', function() {
  $(this).closest('tr').remove();
});

这将从表格中删除最接近的行。

需要注意的是，a.remove是按规定添加到单元格中的一个链接，用于删除该行。如果需要，可以使用任何其他标记，但需要相应地更改代码。

总结

在jQuery中添加编辑和删除表格行非常简单。使用以上代码，可以在几行代码中实现这些功能，使表格更加动态和交互性。