剩余代码编写

Maroon 5327

已于 2022-06-13 00:01:44 修改

阅读量157

点赞数

分类专栏：人事管理系统文章标签： jquery html css

于 2022-06-12 22:44:09 首次发布

本文链接：https://blog.csdn.net/qq_60590604/article/details/125251402

版权

这篇博客详细记录了JavaWeb项目的前后端交互过程，包括jsp前台HTML编写，servlet处理/index路径，动态填充数据，设置删除按钮的点击事件获取ID，DAO和Service层的删除方法实现，前端发送AJAX请求并处理返回，添加页面的展示以及表单验证等步骤，完整实现了数据的添加和删除功能。

摘要由CSDN通过智能技术生成

jsp前台编写 html

代码

在index.jsp里编写前台页面

<%@ page import="tools.JDBCUtiles" %>
<%@ page import="java.sql.Connection" %><%--
  Created by IntelliJ IDEA.
  User: hx
  Date: 2022/6/12
  Time: 20:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <style>
      table {
        width: 600px;
        margin: 0 auto;
      }

      table td {
        text-align: center;
      }

      table td, table th {
        border: 1px solid black;
      }

      .green {
        background-color: #04dc01;
      }
    </style>
    <script src="jquery-1.8.2.min.js"></script>
    <script>
      $(function () {
        $("body").css("backgroundColor","green")
      })
    </script>
  </head>
  <body>
  <%
    Connection connection = JDBCUtiles.getConnection();
    out.print(connection);
  %>
  <table cellspacing="0" border="1" width="600">
    <caption><h1>人员列表</h1></caption>
    <thead>
    <tr class="green">
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>等级</th>
      <th>部门</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
    </tbody>
    <tfoot>
    <tr>
      <td colspan="7">
        <button class="addData">添加人员</button>
      </td>
    </tr>
    </tfoot>
  </table>

  </body>
</html>

效果