jQuery实现表格的增、删、改操作示例

jQuery实现表格的增、删、改操作示例

前言

jQuery是一个非常流行的JavaScript库，它可以轻松地实现网页中的各种交互效果，其中包括表格的增、删、改等操作。

在本文中，我们将介绍如何使用jQuery来实现一个简单的表格增、删、改的功能，并提供两个示例说明。

准备工作

首先，我们需要在HTML页面中添加一个用于显示表格的div元素，并在其内部添加一个table元素，代码如下所示：

<div id="table-container">
  <table id="my-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

注意，我们为table元素设置了一个id为“my-table”，以便于后面的操作。

接下来，我们需要编写一些JavaScript代码来初始化表格，并添加一些样式，代码如下：

$(document).ready(function(){
  // 初始化表格
  initTable();

  // 添加样式
  $('#table-container').css({
    "width": "700px",
    "height": "400px",
    "border": "1px solid #999",
    "overflow": "auto"
  });
  $('#my-table').css({
    "width": "100%",
    "border-collapse": "collapse"
  });
  $('#my-table th').css({
    "background-color": "#ddd",
    "text-align": "center",
    "padding": "5px 10px"
  });
  $('#my-table td').css({
    "text-align": "center",
    "padding": "5px 10px",
    "border": "1px solid #ddd"
  });
});

实现表格的增、删、改操作

增加数据

表格中的数据通常是从后端服务器读取的，但为了方便演示，我们可以使用本地数据来模拟。在示例中，我们使用一个数组来保存表格中数据，如下所示：

var data = [
  {id: 1, name: "张三", age: 26},
  {id: 2, name: "李四", age: 32},
  {id: 3, name: "王五", age: 18},
  {id: 4, name: "赵六", age: 24},
  {id: 5, name: "陈七", age: 29}
];

要向表格中添加数据，我们需要编写一个函数，该函数会将数据添加到表格中：

function addData(data) {
  var newRow = "<tr>" +
                "<td>" + data.id + "</td>" +
                "<td>" + data.name + "</td>" +
                "<td>" + data.age + "</td>" +
                "<td><button class='delete-btn'>删除</button></td>" +
              "</tr>";
  $('#my-table tbody').append(newRow);
}

该函数将会向表格中添加一行数据，其中包括id、name、age和一个删除按钮。要创建新的行，我们使用了一个字符串变量来拼接一个HTML行元素，然后将其添加到表格中。

要调用该函数，我们可以通过jQuery来绑定一个点击事件，如下所示：

$('#add-btn').click(function(){
  var newData = {
    id: data.length + 1,
    name: "新用户",
    age: 20
  };
  data.push(newData);
  addData(newData);
});

在这个示例中，我们为一个button元素绑定了一个点击事件，当用户点击按钮时，将调用addData函数来添加新的数据行。

删除数据

接下来，我们将实现一个删除数据的功能，即当用户点击删除按钮时，该行数据将被从表格中删除。

要实现这个功能，我们可以使用jQuery的.on()方法来绑定点击事件：

$('#my-table').on('click', '.delete-btn', function(){
  $(this).closest('tr').remove();
});

该语句会在#my-table元素上绑定一个点击事件，当用户点击删除按钮时，将会调用回调函数。在这个回调函数中，我们使用了closest()方法来寻找最近的tr元素，并将其删除。

修改数据

最后，我们来实现一个修改数据的功能，即当用户双击某个表格单元格时，可以修改该单元格中的数据。

为了实现这个功能，我们需要在表格单元格中添加一个可编辑的“input”元素，并在用户双击单元格时将其显示出来。

$('#my-table').on('dblclick', 'td', function(){
  var originHtml = $(this).html();
  var inputEl = "<input type='text' value='"+ originHtml +"' />";
  $(this).html(inputEl);
  $(this).find('input').focus();
});

该语句会在每个表格单元格上绑定一个双击事件，当用户双击单元格时，将会调用回调函数。

在回调函数中，我们首先获取单元格中的原始html代码，然后创建一个新的input元素，并将其插入到单元格中。

最后，我们使用jQuery中的focus()方法将输入框获得焦点，以便用户可以直接在输入框中进行编辑。

为了实现将修改后的数据保存到表格中，我们还需要创建一个blur事件来响应用户的保存操作。

$('#my-table').on('blur', 'input', function(){
  var newValue = $(this).val();
  $(this).closest('td').html(newValue);
});

该语句会在每个input元素上绑定一个blur事件，当用户对输入框失去焦点时，将会调用回调函数。在这个回调函数中，我们首先获取输入框中的新值，然后使用closest()方法找到它所在的单元格，最后将新值写入该单元格中。

至此，我们已经完成了一个简单的表格增、删、改的功能。

示例说明

示例一

在第一个示例中，我们将使用ajax来从后端服务器获取数据，并将其添加到表格中。

$.ajax({
  url: 'http://localhost:8000/data',
  type: 'GET',
  success: function(data){
    for (var i = 0; i < data.length; i++) {
      var rowData = data[i];
      addData(rowData);
    }
  }
});

该语句会向服务器发送一个GET请求，获取数据后调用回调函数。在回调函数中，我们使用循环来遍历返回的数据，并将每一行数据添加到表格中。

示例二

在第二个示例中，我们将使用jQuery UI的dialog来实现一个弹出框，在其中输入要添加的数据，并将其添加到表格中。

var dialog = $('#add-dialog').dialog({
  autoOpen: false,
  modal: true,
  buttons: {
    "添加": function(){
      var newData = {
        id: data.length + 1,
        name: $('#name-input').val(),
        age: $('#age-input').val()
      };
      data.push(newData);
      addData(newData);
      $(this).dialog('close');
    },
    "取消": function(){
      $(this).dialog('close');
    }
  }
});

$('#add-btn2').click(function(){
  dialog.dialog('open');
});

该语句首先创建了一个dialog元素，并将其隐藏起来。当用户点击“添加”按钮时，该弹出框将会被打开。

在回调函数中，我们首先获取输入框中的数据，并将其保存到本地数据中。接着，我们调用addData函数来将数据添加到表格中，最后关闭弹出框。同时，我们还为“取消”按钮绑定了一个点击事件，以便用户可以随时关闭弹出框。

总结

在本文中，我们介绍了如何使用jQuery来实现一个简单的表格增、删、改的功能，包括添加数据、删除数据和修改数据。我们还提供了两个示例说明，其中第一个示例使用ajax来从后端服务器获取数据，并将其添加到表格中。第二个示例则使用了jQuery UI的dialog组件来实现一个弹出框，用户可以在其中输入要添加的数据。