PHP后端写一个增删查改js前端展示出来

这个问题需要更多的具体信息才能回答。需要了解你的后端和前端技术栈，你的数据库模型以及你的需求。以下是一个简单的例子，它使用PHP和MySQL作为后端技术栈，使用jQuery和Bootstrap作为前端技术栈。

后端：

1. 建立数据库表格，例如“users”表格，包含“id”、“name”、“email”和“phone”字段。

2. 编写PHP脚本，连接到数据库并处理增删查改操作。例如：

<?php
// 连接到数据库
$conn = new mysqli("localhost", "username", "password", "database");

// 处理添加操作
if ($_POST["action"] == "add") {
  $name = $_POST["name"];
  $email = $_POST["email"];
  $phone = $_POST["phone"];
  $sql = "INSERT INTO users (name, email, phone) VALUES ('$name', '$email', '$phone')";
  $conn->query($sql);
}

// 处理删除操作
if ($_POST["action"] == "delete") {
  $id = $_POST["id"];
  $sql = "DELETE FROM users WHERE id=$id";
  $conn->query($sql);
}

// 处理修改操作
if ($_POST["action"] == "edit") {
  $id = $_POST["id"];
  $name = $_POST["name"];
  $email = $_POST["email"];
  $phone = $_POST["phone"];
  $sql = "UPDATE users SET name='$name', email='$email', phone='$phone' WHERE id=$id";
  $conn->query($sql);
}

// 处理查询操作
if ($_POST["action"] == "query") {
  $sql = "SELECT * FROM users";
  $result = $conn->query($sql);
  $data = array();
  while ($row = $result->fetch_assoc()) {
    $data[] = $row;
  }
  echo json_encode($data);
}

// 关闭数据库连接
$conn->close();
?>

前端：

1. 使用jQuery从后端脚本获取数据并展示在页面上。例如：

<script>
$(function() {
  // 获取用户数据
  $.post("backend.php", {action: "query"}, function(data) {
    // 展示数据
    var table = $("<table>").addClass("table table-striped");
    var thead = $("<thead>").append($("<tr>").append(
      $("<th>").text("ID"),
      $("<th>").text("Name"),
      $("<th>").text("Email"),
      $("<th>").text("Phone"),
      $("<th>").text("Actions")
    ));
    var tbody = $("<tbody>");
    $.each(JSON.parse(data), function(i, user) {
      var tr = $("<tr>").append(
        $("<td>").text(user.id),
        $("<td>").text(user.name),
        $("<td>").text(user.email),
        $("<td>").text(user.phone),
        $("<td>").append(
          $("<button>").addClass("btn btn-primary btn-sm").text("Edit").click(function() {
            // 显示编辑表单
            $("#edit-form").show();
            $("#edit-form input[name='id']").val(user.id);
            $("#edit-form input[name='name']").val(user.name);
            $("#edit-form input[name='email']").val(user.email);
            $("#edit-form input[name='phone']").val(user.phone);
          }),
          $("<button>").addClass("btn btn-danger btn-sm").text("Delete").click(function() {
            // 删除用户
            if (confirm("Are you sure to delete this user?")) {
              $.post("backend.php", {action: "delete", id: user.id}, function() {
                tr.remove();
              });
            }
          })
        )
      );
      tbody.append(tr);
    });
    table.append(thead, tbody);
    $("#user-list").append(table);
  });

  // 处理添加表单提交
  $("#add-form").submit(function(e) {
    e.preventDefault();
    $.post("backend.php", $(this).serialize() + "&action=add", function() {
      location.reload();
    });
  });

  // 处理编辑表单提交
  $("#edit-form").submit(function(e) {
    e.preventDefault();
    $.post("backend.php", $(this).serialize() + "&action=edit", function() {
      location.reload();
    });
  });
});
</script>

2. 创建添加表单和编辑表单。例如：

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <h1>User List</h1>
      <div id="user-list"></div>
    </div>
    <div class="col-md-4">
      <h2>Add User</h2>
      <form id="add-form">
        <div class="form-group">
          <input type="text" class="form-control" name="name" placeholder="Name" required>
        </div>
        <div class="form-group">
          <input type="email" class="form-control" name="email" placeholder="Email" required>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" name="phone" placeholder="Phone" required>
        </div>
        <button type="submit" class="btn btn-primary">Add</button>
      </form>
      <br>
      <h2>Edit User</h2>
      <form id="edit-form" style="display: none;">
        <input type="hidden" name="id">
        <div class="form-group">
          <input type="text" class="form-control" name="name" placeholder="Name" required>
        </div>
        <div class="form-group">
          <input type="email" class="form-control" name="email" placeholder="Email" required>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" name="phone" placeholder="Phone" required>
        </div>
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-secondary" onclick="$(this).closest('form').hide();">Cancel</button>
      </form>
    </div>
  </div>
</div>