套餐列表 table { border-collapse: collapse; width: 100%; } th, td { text-align: center; padding: 8px; border: 1px solid...-DPDK中文网

<!DOCTYPE html>

<meta charset="UTF-8">
<title>套餐列表</title>
<style>
    /* 页面布局 */
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
    }

    #container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #header {
        background-color: #00BFFF;
        color: white;
        text-align: center;
        padding: 20px 0;
        width: 100%;
    }

    h1 {
        margin-top: 0;
    }

    #content {
        width: 80%;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        text-align: center;
        padding: 8px;
        border: 1px solid #ddd;
    }

    th {
       background-color:#F5F5F5 ;
       color:#333333;  
       font-weight:bold; 
       font-size :16px; 
     }

     td{
         background-color:#FFFFFF ; 
         color:#666666 ;
         font-size :14px; 
     }

     .button1,.delete-button{
            background-color:#00BFFF ;
            border:none;    
            color:white;     
            padding-top :10px;   
            padding-bottom :10px;   
            padding-right :20px;   
            padding-left :20px;   
            cursor:pointer
      } 

      .button1:hover,.delete-button:hover{
           opacity:.9;}

</style>

<!-- 头部 -->
<div id="header">
    <h1>套餐列表</h1>
</div>

<!-- 内容 -->
<div id="content">
    <form action="Add_package.jsp">
        <button type="submit" class="button1">增加套餐</button>
    </form>

    <form action="Delete_package.jsp">
        <table id="data-table">
            <thead>
            <tr>
                <th>序号</th>
                <th>套餐名称</th>
                <th>套餐价格/元</th>
                <th>通话时间/分钟</th>
                <th>流量/G</th>
                <th>短信/条</th>
                <th>套餐信息</th>
                <th></th>
            </tr>
            </thead>

            <% String package_name = null,package_information = null;
               int id = 1,price = 0,call_time = 0,flow = 0,sms = 0;
               Select_package pack = new Select_package();
               ResultSet rs = pack.select();
               while(rs.next()){
                   package_name = rs.getString(2);
                   price = rs.getInt(3);
                   call_time = rs.getInt(4);
                   flow = rs.getInt(5);
                   sms = rs.getInt(6);
                   package_information = rs.getString(7);%>

            <!-- 表格数据 -->
            <tbody>
            <tr>
                <!-- 序号列 -->
                <td><%=id%></td>

                <!-- 套餐名称列 -->
                <td><%=package_name%></td>

                <!-- 套餐价格列 -->
                 <% if(price==0){ %><!-- 如果价格为0，显示“免费” -->
                 <td>免费</td>
                 <% }else{ %><!-- 否则显示价格 -->
                 <td><%=price%></td>
                <% } %>

                <!-- 通话时间列 -->
                <td><%=call_time%></td>

                <!-- 流量列 -->
                <td><%=flow%></td>

                <!-- 短信列 -->
                <td><%=sms%></td>

                <!-- 套餐信息列 -->
                <td><%=package_information%></td>

               <!-- 操作列：删除按钮-->
              <%
               String package_id = rs.getString(1); // 获取套餐ID
               %>
              <td>
                  <form action="Change_meal_mid.jsp">
                       <input type="text" name="package_id" value="<%=package_id%>" hidden><!-- 将套餐ID存入隐藏域中 -->
                        <button class="delete-button" type="submit">删除</button>
                   </form>
             </td>
            </tr>
            </tbody>
            <%id++;}%> <!-- 计数器自增 -->

        </table>

    </form>

</div>