表单样式代码

HTML、CSS与Ajax技术介绍

原创于 2024-12-11 15:40:49 发布 · 746 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#html

html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
  <link rel="stylesheet" href="../static/css/test.css">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery.cookie/jquery.cookie.min.js"></script>
  <script src="../static/js/test.js"></script>
</head>

<body>
<div class="container">
  <div class="top">
    <div class="search">
      <select class="subhead">
        <option value="0">全部栏目</option>
        <option value="1">新闻动态</option>
        <option value="2">通知通告</option>
      </select>
      <input type="text" class="sub_title" placeholder="请输入标题">
      <input type="text" class="sub_content" placeholder="请输入摘要">
      <input type="button" value="搜索" class="btn">
    </div>
    <div class="btns">
      <input type="button" value="批量删除" class="disDel">
      <input type="button" value="添加" class="add">
    </div>
  </div>

  <table border="1" cellspacing="0">
    <thead>
    <tr>
      <td><input type="checkbox" class="checkAll"></td>
      <td>ID</td>
      <td>学校编号</td>
      <td>学校名称</td>
      <td>专业编号</td>
      <td>专业名称</td>
      <td>专业最低分</td>
      <td>专业最位次</td>
      <td>操作</td>
    <tr>
    </thead>

    <tbody class="contentBody">
        //表单数据
    </tbody>

    <table>
      <ul class="pagenation">
        //表单分页
      </ul>
    </table>
  </table>
</div>

</body>
</html>

css

* {
    margin: 0;
    padding: 0;
}


/* 内容管理列表页面样式 */

.container {}

.container .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.container .top input[type=text],
.container .top select {
    border: 1px solid rgb(88, 136, 246);
    padding: 10px;
    border-radius: 5px;
    outline: none;
    margin-right: 4px;
}

.container .top input[type=button] {
    background: linear-gradient(45deg, rgb(88, 136, 246), rgb(98, 110, 232));
    padding: 10px;
    border: none;
    color: #fff;
    border-radius: 5px;
    cursor: pointer
}

.container table {
    width: 100%;
    border: none;
}

.container table thead tr {
    background: linear-gradient(45deg, rgb(98, 110, 232), rgb(88, 136, 246))
}

.container table thead tr td {
    color: #fff;
}

.container table thead tr td:last-child,
.container table tbody tr td:last-child,
.container table thead tr td:first-child,
.container table tbody tr td:first-child {
    text-align: center;
}

.container table tbody tr:nth-child(odd) {
    background: #eee
}

.container table tbody tr:nth-child(even) {
    background: #ddd
}

.container table td {
    padding: 10px;
    border: 1px solid #fff;
}

.container table td input {
    border: 1px solid rgb(88, 136, 246);
    color: rgb(88, 136, 246);
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
}

.container .pagenation {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.container .pagenation li {
    list-style: none;
    border: 1px solid rgb(88, 136, 246);
    color: rgb(88, 136, 246);
    padding: 5px;
    cursor: pointer;
    font-size: 12px;
    margin: 0 4px;
}

.container .pagenation li.current {
    background: rgb(88, 136, 246);
    color: #fff;
}


/* 内容管理添加页面样式 */

.container .item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.container .item input,
.container .item select,
.container .item textarea {
    border: 1px solid rgb(88, 136, 246);
    padding: 10px;
    border-radius: 5px;
    outline: none;
}

.container .item label {
    color: rgb(88, 136, 246);
    font-weight: 600;
    margin-bottom: 5px;
}

.container .item:last-child {
    flex-direction: row;
    justify-content: center;
}

.container .item:last-child input {
    background: linear-gradient(45deg, rgb(88, 136, 246), rgb(98, 110, 232));
    padding: 10px 20px;
    border: none;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 10px;
}

.container .item .myForm {
    display: flex;
}

.container .item .myForm .imgBox {
    margin-left: 20px;
}

.container .item .myForm .imgBox img {
    width: 100px;
    height: 50px;
    object-fit: cover;
}

ajax

$(function(){

    //定义单个页面包含数据的数量
    var pageSize = 5
    //初始化数据
    getData(1)


    //定义加载数据函数
    function getData(page){
        //发起请求
        $.ajax({
            url:"/testTry",
            type:"get",
            data:{
                （
                pageSize:pageSize,
                page:page,
            },
            success:function(data){
                $(".contentBody").empty();
                var arr = data;
                console.log(arr);
                for(var i=0;i<data.length;i++){
                    $(".contentBody").append('<tr>'+
                        '<td><input type="checkbox" class="item" index="'+arr[i].id+'"></td>'+
                        '<td>'+arr[i].id+'</td>'+
                        '<td>'+arr[i].schoolCode+'</td>'+
                        '<td>'+arr[i].schoolName+'</td>'+
                        '<td>'+arr[i].pCode+'</td>'+
                        '<td>'+arr[i].pName+'</td>'+
                        '<td>'+arr[i].lowestScore+'</td>'+
                        '<td>'+arr[i].lowestRank+'</td>'+
                        '<td>'+
                        '<input type="button" value="删除" class="del" index="'+arr[i].id+'">'+
                        '<input type="button" value="修改" class="update" index="'+arr[i].id+'">'+
                        '</td>'+
                        '</td>'+
                        '</tr>'
                    )
                }
            }
        })
    }

})