基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）

下面我将为您详细讲解“基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）”的完整攻略。

什么是动态增删改查表格信息

动态增删改查表格信息指的是通过使用jQuery等前端框架，实现在页面上展现一张表格，并通过添加、删除、修改和查询等操作，动态地对表格中的数据进行增删改查。这一功能的实现可以让用户更加方便地查看和操作页面上的数据。

实现动态增删改查表格信息的步骤

下面我将为您介绍实现动态增删改查表格信息的步骤。

1. 准备HTML结构

首先需要准备HTML结构，其中包括表格的基本结构和用于输入数据的表单等。

<table id="mytable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <label for="age">年龄：</label>
  <input type="text" id="age" name="age">
  <input type="button" value="添加" id="add">
</form>

2. 配置jQuery

需要在页面中引入jQuery库，并编写jQuery代码实现增删改查的操作。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
  $(function() {
    // 在这里编写增删改查等操作代码
  });
</script>

3. 实现动态增加数据

可以在“添加”按钮的click事件中，获取表单中的数据，并将数据添加到表格中，从而实现动态增加数据。示例代码如下：

$('#add').click(function() {
  var name = $('#name').val();
  var age = $('#age').val();
  if (!name || !age) return;
  var tr = '<tr><td>'+ name +'</td><td>'+ age +'</td><td><a href="javascript:" class="delete">删除</a></td></tr>';
  $('#mytable tbody').append(tr);
});

4. 实现动态删除数据

可以将表格中每一行的删除按钮的click事件委托给父元素，从而实现动态删除数据。示例代码如下：

$('#mytable tbody').on('click', '.delete', function() {
  $(this).closest('tr').remove();
});

5. 实现动态修改数据

可以将表格中每一行的数据双击事件委托给父元素，从而实现动态修改数据。示例代码如下：

$('#mytable tbody').on('dblclick', 'tr:not(.editing)', function() {
  var tds = $(this).find('td');
  var name = tds.eq(0).text();
  var age = tds.eq(1).text();
  var inputs = '<input type="text" value="'+ name +'" data-field="name"><input type="text" value="'+ age +'" data-field="age">';
  tds.html(inputs);
  $(this).addClass('editing');
});

$('#mytable tbody').on('blur', 'input', function() {
  var td = $(this).parent();
  var value = $(this).val();
  var field = $(this).data('field');
  td.html(value);
  td.closest('tr').removeClass('editing');
});

6. 实现动态查询数据

可以编写一个过滤函数，用于实现动态查询数据。示例代码如下：

$('#query').on('input', function() {
  var keyword = $(this).val();
  $('#mytable tbody tr').each(function() {
    var tr = $(this);
    var content = tr.text();
    if (content.indexOf(keyword) !== -1) {
      tr.show();
    } else {
      tr.hide();
    }
  });
});

示例

下面是一个基于jQuery的动态增删改查表格的完整示例，您可以在此基础上进行扩展和定制。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态增删改查表格信息</title>
  <style>
    #mytable {
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    #mytable th,
    #mytable td {
      border: 1px solid #ccc;
      padding: 5px;
    }
    #mytable td:first-child {
      width: 100px;
    }
    #myform label {
      display: inline-block;
      width: 40px;
    }
    #myform input[type=text] {
      margin-right: 10px;
    }
    #query {
      font-size: 14px;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      margin-bottom: 20px;
    }
    .editing input[type=text] {
      width: 80px;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <table id="mytable">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <form id="myform">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    <label for="age">年龄：</label>
    <input type="text" id="age" name="age">
    <input type="button" value="添加" id="add">
  </form>

  <input type="text" id="query" placeholder="查询姓名">

  <script>
    $(function() {
      $('#add').click(function() {
        var name = $('#name').val();
        var age = $('#age').val();
        if (!name || !age) return;
        var tr = '<tr><td>'+ name +'</td><td>'+ age +'</td><td><a href="javascript:" class="delete">删除</a></td></tr>';
        $('#mytable tbody').append(tr);
      });

      $('#mytable tbody').on('click', '.delete', function() {
        $(this).closest('tr').remove();
      });

      $('#mytable tbody').on('dblclick', 'tr:not(.editing)', function() {
        var tds = $(this).find('td');
        var name = tds.eq(0).text();
        var age = tds.eq(1).text();
        var inputs = '<input type="text" value="'+ name +'" data-field="name"><input type="text" value="'+ age +'" data-field="age">';
        tds.html(inputs);
        $(this).addClass('editing');
      });

      $('#mytable tbody').on('blur', 'input', function() {
        var td = $(this).parent();
        var value = $(this).val();
        var field = $(this).data('field');
        td.html(value);
        td.closest('tr').removeClass('editing');
      });

      $('#query').on('input', function() {
        var keyword = $(this).val();
        $('#mytable tbody tr').each(function() {
          var tr = $(this);
          var content = tr.text();
          if (content.indexOf(keyword) !== -1) {
            tr.show();
          } else {
            tr.hide();
          }
        });
      });
    });
  </script>
</body>
</html>

上面的示例实现了一个简单的动态增删改查表格，并添加了查询功能和行内编辑功能。您可以通过页面中的输入框进行姓名的查询，也可以通过双击某行数据编辑对应信息。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay） - Python技术站