后台管理系统增删改查

周周_加油

于 2023-03-12 14:17:21 发布

阅读量1.2k

点赞数 8

分类专栏：前端分享文章标签： html css javascript bootstrap layui Powered by 金山文档

本文链接： https://blog.csdn.net/qq_46703611/article/details/129475109

版权

前端分享专栏收录该内容

14 篇文章 1 订阅

订阅专栏

整理了一篇关于小白学习的增删改查，但是只是前面阶段的，关于数据库连接在以后的文章才会发出来

下面就我的这个后台管理系统发一些片段，希望对学习中的小伙伴提供到参考的价值由于文章有限就只展现一个页面的增删改查代码。

先给大家看这个增删改查的一个页面，嘿嘿嘿。

这是HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Student Information Management System</title>
    
//外部我写好的css
    <link rel="stylesheet" href="../css/zz1.css" />
    <!-- <link rel="stylesheet" href="../js/bootstrap-3.4.1-dist/css/bootstrap.min.css"> -->
   
  </head>

  <body id="hui">
    <div>
      <header>
        <h1 class="w" id="hthe"><span></span> 合同管理</h1>
      </header>
      <main>
        <div class="w">
          <div class="chaxun">
            <span>
              合同编号：<input
                type="text"
                name=""
                id="htbh"
                placeholder="请输入合同编号"
              />
            </span>
            <button class="glyphicon glyphicon-search "   id="btn1">查询</button>
            <button class="glyphicon glyphicon-plus" id="add">新增</button>
          
            <button class="glyphicon glyphicon-refresh" id="cz">重置</button>
           
          </div>
          <div id="adbt">
           
           
           
          <table>
            <tbody id="chaxun">
              <tr id="thead">
                
                <th>序号</th>
                <th>合同编号</th>
                <th>主体</th>
                <th>区域</th>
                <th>签约企业</th>
                <th>企业类型</th>
                <th>合同类型</th>
                <th>合同状态</th>
                <th>签约人员</th>
                <th>开始日期</th>
                <th>结束日期</th>
                <th>操作</th>
              </tr>
            </tbody>
          </table>
          <div id="navigate">
            <div id="tpbt">
              <button id="lastpage">上一页</button>
              <button id="nextpage">下一页</button>
            </div>
            <p>
              
              这是第<span id="pgn"></span>页,共<span id="en"></span>条
              
            </p>
            <!--Number of entries-->
          
          </div>
        </div>
      </main>
    </div>
     
   
    <div class="achaesi" id="asi">
      <!--    <form action="" method="post">-->
      <h2>新增企业信息</h2>
      <div class="ifm">
        <div>
          <label for="assn">合同编号</label>
          <input
            id="assn"
            type="text"
            placeholder="12235"
            required="required"
            maxlength="6"
          />
        </div>
        <div>
          <label for="asn">主体类型</label>
          <input
            id="asn"
            type="text"
            placeholder="主体"
            required="required"
            minlength="1"
            maxlength="8"
          />
        </div>
        <div>
          <label for="asac">区域地址</label>
          <input
            id="asac"
            type="text"
            placeholder="A区"
            required="required"
            minlength="1"
            maxlength="10"
          />
        </div>
        <div>
          <label for="asm">签约企业</label>
          <input
            id="asm"
            type="text"
            placeholder="周周公司"
            required="required"
          />
        </div>
        <div>
          <label for="asg">企业类型</label>
          <input
            id="asg"
            type="text"
            placeholder="一般企业"
            required="required"
          />
        </div>
        <div>
          <label for="asc">合同类型</label>
          <input
            id="asc"
            type="text"
            placeholder="未到期"
            required="required"
            maxlength="3"
          />
        </div>
        <div>
          <label for="asc">合同状态</label>
          <input
            id="asc"
            type="text"
            placeholder="生效"
            required="required"
            maxlength="3"
          />
        </div>
        <div>
          <label for="asag">签约人员</label>
          <input id="asag" type="text" placeholder="张山" required="required" />
        </div>
        <div>
          <label for="asag">开始日期</label>
          <input
            id="asag"
            type="text"
            placeholder="2023-2-22"
            required="required"
          />
        </div>
        <div>
          <label for="asag">结束日期</label>
          <input
            id="asag"
            type="text"
            placeholder="2023-2-29"
            required="required"
          />
        </div>
      </div>
      <hr />
      <div class="scbt">
        <button type="submit" id="submit">提交</button>
        <button class="cancel">取消</button>
      </div>
      <!--    </form>-->
    </div>
    <div class="achaesi" id="chasi">
      <!--    <form action="" method="post">-->

      <!-- 修改企业信息 -->
      <h2>修改企业信息</h2>
      <div class="ifm">
        <div>
          <label for="chassn">合同编号</label>
          <input id="chassn" type="text" readonly required="required" />
        </div>
        <div>
          <label for="chasn">主体类型</label>
          <input id="chasn" type="text" required="required" />
        </div>
        <div>
          <label for="chasac">区域地址</label>
          <input id="chasac" type="text" required="required" />
        </div>
        <div>
          <label for="chasm">签约企业</label>
          <input id="chasm" type="text" required="required" />
        </div>
        <div>
          <label for="chasg">企业类型</label>
          <input id="chasg" type="text" />
        </div>
        <div>
          <label for="chasc">合同类型</label>
          <input id="chasc" type="text" required="required" />
        </div>
        <div>
          <label for="chasag">合同状态</label>
          <input id="chasag" type="text" required="required" />
        </div>
      </div>
      <hr />
      <div class="scbt">
        <button type="submit" id="save" class="baocun">保存</button>
        <button class="cancel">取消</button>
      </div>
      <!--    </form>-->
    </div>

    <!-- 查看 -->
    <div class="achaesi" id="chesi">
      <h2>企业信息</h2>
      <div class="ifm">
        <div>
          <label for="chessn">合同编号</label>
          <input type="text" readonly id="chessn" />
        </div>
        <div>
          <label for="chesn">主体类型</label>
          <input type="text" readonly id="chesn" />
        </div>
        <div>
          <label for="chesac">区域地点</label>
          <input type="text" readonly id="chesac" />
        </div>
        <div>
          <label for="chesm">签约企业</label>
          <input type="text" readonly id="chesm" />
        </div>
        <div>
          <label for="chesg">企业类型</label>
          <input type="text" readonly id="chesg" />
        </div>
        <div>
          <label for="chesc">合同类型</label>
          <input type="text" readonly id="chesc" />
        </div>
        <div>
          <label for="chesag">合同状态</label>
          <input type="text" readonly id="chesag" />
        </div>
        <div>
          <label for="chesag">签约人员</label>
          <input type="text" readonly id="chesag" />
        </div>
        <div>
          <label for="chesag">开始日期</label>
          <input type="text" readonly id="chesag" />
        </div>
        <div>
          <label for="chesag">结束日期</label>
          <input type="text" readonly id="chesag" />
        </div>
      </div>
      <hr />
      <div class="scbt">
        <button class="cancel">取消</button>
      </div>
    </div>
    <script src="../js/JQ/jquery.js"></script>
    <!-- <script src="../js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script> -->
    <script src="../js/layer-v3.5.1/layer/layer.js"></script>
    <script src="../js/zz.js/zzdata.js"></script>
    <script src="../js/zz.js/zzd.js"></script>
  </body>
</html>

css

* {
  margin: 0;
  padding: 0;
}
#hui {
  background-color: rgb(242, 242, 242);
}

#hthe {
  font-size: 16px;
  color: #999;
  font-weight: bold;
  line-height: 50px;
  padding-left: 5px;
}
#xuyuehd {
  font-size: 16px;
  color: #999;
  font-weight: bold;
  line-height: 50px;
}
#xuyuehui {
  background-color: rgb(242, 242, 242);
}

#yanqihui {
  background-color: rgb(242, 242, 242);
}

.w {
  /* margin-top: 50px; */
  margin: 0 auto;
  left: -36px;
  width: 1224px;
  text-align: left;
  background-color: #fff;
}
table tr button {
  /* color: red; */
  width: 60px;
  height: 25px;
  border-radius: 5px;
  text-align: center;
  line-height: 25px;
  background-color: #0066cc;
  color: #fff;
  font-size: 13px;
  margin-left: 5px;
}
.sbg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.4;
  z-index: 1;
}

header {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  background-color: #fff;
  height: 50px;
  line-height: 50px;
}
#headd {
  /* padding: 0 10px; */
  font-size: 16px;
  color: #999;
  font-weight: bold;
  line-height: 50px;
}

header h1 {
  margin-top: 0;
  font-size: 16px;
  color: #999;
}
header h1 span {
  width: 5px;
  height: 18px;
  margin: 0px 10px;
  display: inline-block;
  background-color: #0066cc;
  vertical-align: middle;
}
.red {
  vertical-align: middle;
}

main #adbt {
  text-align: right;
}
main button {
  margin: 20px 0px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  color: white;
  border: none;
  border-radius: 5px;
}

#btn1 {
  background-color: #0066cc;
}
#add {
  background-color: rgb(87, 197, 247);
}
#cz {
  background-color: rgb(111, 224, 130);
}
main #navigate {
  position: relative;
  padding: 0 12px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
main #navigate p {
  margin-left: 180px;
  font-size: 13px;
  position: absolute;

  margin-top: 24px;
}

table {
  margin: 0 auto;
  width: 1200px;
  text-align: center;
  border-spacing: 0;
  font-size: 13px;
  /* border: 1px solid red; */
}

table tbody tr:first-of-type {
  background-color: #dadee1 !important;

  height: 60px;
}

table tbody td {
  /* padding: 0%; */
  width: 18px;
  border-bottom: 1px solid black;
}
table tbody th {
  font-weight: 400;
  text-align: center;
}
table tbody tr:not([id="thead"]):hover {
  cursor: pointer;
  background-color: rgb(240, 240, 240);
  transition: background-color 0.3s;
}

table tbody tr button:nth-child(3) {
  background-color: #ff0000;
}

table tbody tr button:nth-child(2) {
  background-color: #2bd7f5;
}
table tbody tr button:nth-child(1) {
  background-color: #4bd863;
  position: relative;
  right: -15px;
  /* margin-left: 1px; */
}

.achaesi {
  display: none;
  /* z-index: 9999; */
  position: fixed;
  top: 750px;
  left: 34%;
  background-color: white;
  z-index: 2;
  width: 550px;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
  border: #a7bbc8 1px solid;
  border-radius: 10px;
  height: 650px;
  -webkit-box-shadow: 0px 0px 77px 10px #616f9b;
  -moz-box-shadow: 0px 0px 77px 10px #6d7981;
  box-shadow: 0px 0px 77px 10px #6d7981;
}
.achaesi h2 {
  padding: 5px 20px;
  /* color: #2c3675; */
  color: white;
  font-size: 16px;
  background-color: rgba(202, 202, 202, 0.8);
}
.achaesi .ifm {
  width: 380px;
  margin: 10px auto;
  display: flex;
  flex-flow: column nowrap;
}
.achaesi .ifm div {
  margin: 10px;
}
.achaesi .ifm div input {
  width: 220px;
  height: 30px;
}
.achaesi .scbt {
  float: right;
  margin-top: 6px;
  margin-right: 30px;
}
.achaesi .scbt button:first-of-type {
  width: 85px;
  height: 36px;
  background-color: #5cb85c;
  /* border: 0; */
}
.achaesi .scbt button:last-of-type {
  width: 85px;
  height: 36px;
  background-color: white;
}

#tpbt button {
  background-color: #fff;
  border: 1px solid black;
  color: #000;
  border-radius: 0;
}

#tpbt button:hover {
  background-color: rgb(0, 150, 136);
  color: #fff;
}

#pgn {
  display: inline-block;
  width: 30px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border: 1px solid black;
}
/*# sourceMappingURL=studentInformationManagementSystem.css.map */

.chaxun {
  position: relative;
  top: 20px;
  margin-bottom: 20px;
  padding-left: 15px;
}

.chaxun > span {
  font-size: 14px;
  color: #333;
}

.chaxun > span > input {
  height: 30px;
}
.he {
  height: 730px;
}

#save {
  color: #fff;
  background-color: #2bd7f5;
  border: none;
}
#submit {
  background-color: #2bd7f5;
  border: none;
  color: #fff;
}

localStorage.setItem("eat", JSON.stringify(datas));
var students = localStorage.getItem("eat");



$(function () {

    students = JSON.parse(students);



    // 分页
    let page = 1;//第几页
    let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
    let xuhao = students.length;
    for (let i = 0; i < 5; i++) {//初始页面信息显示
        let student = $("<tr>" + "<td>" + (i + 1) + "</td>" + "<td>" + students[i].htNumber + "</td>" + "<td>" + students[i].main + "</td>" + "<td>" + students[i].quyu + "</td>" + "<td>" + students[i].businessName + "</td>" + "<td>"
            + students[i].businessType + "</td>" + "<td>" + students[i].inTentType + "</td>" + "<td>" + students[i].htzt + "</td>" + "<td>" + students[i].InvestmentPer + "</td>" + "<td>" + students[i].StartTime + "</td>" + "<td>" + students[i].EndTime + "</td>" + "<td> <button class=\"check\">详情</button> <button class=\"modify\">编辑</button><button>删除</button>   </td>" + " </tr>");
        $("tbody").append(student);
    }
    $("tbody").trigger("create");         //trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）
    $("#pgn").text(page);
    $("#en").text(xuhao);
    $("#add").click(function () {       //点击新增按钮触发的动作
        $("#asi").show();
        $('#asi').animate({
            top: '70px',
        }, 500)

    });

    shanchu();


    let objKeys = ["htNumber", "main", "quyu", "businessName", "businessType", "inTentType", "htzt", "InvestmentPer", "StartTime", "EndTime", "caozuo"];
    $("#submit").click(function () {//提交按钮点击触发的动作
        let student = {};
        let isEmpty = false;
        $("#asi").find("input").each(function (index, domEle) {
            if (!domEle.value) {//如果添加时表单内有值为空，则不进行添加
                isEmpty = true;

            }
            student[objKeys[index]] = domEle.value;
        });
        if (!isEmpty) {
            students[xuhao] = student;
            xuhao++;
            $("#en").text(xuhao);


            let lpren = $("tbody tr").length - 1;//最后一页剩余的条目数;
            if (no + 5 > xuhao && lpren < 5) {//增加一个append函数，如果显示的是最后一页那么需要更新界面。
                $("tbody tr:last").after("<tr>" + "<td>" + (no + lpren + 1) + "</td>" + "<td>" + student.htNumber + "</td>" + "<td>" + student.main + "</td>" + "<td>" + student.quyu + "</td>" + "<td>" + student.businessName + "</td>" + "<td>"
                    + student.businessType + "</td>" + "<td>" + student.inTentType + "</td>" + "<td>" + student.htzt + "</td>" + "<td>" + student.InvestmentPer + "</td>" + "<td>" + student.StartTime + "</td>" + "<td>" + student.EndTime + "<td>" + "<td> <button class=\"check\">详情</button> <button class=\"modify\">编辑</button><button>删除</button>  </td>" + " </tr>");

            }

        }


        $("#asi").animate({
            top: "500px",
        },
            500);
        $("#asi").fadeOut(500);



    });




    $("tbody").on("click", ".check", function () {//点击查看按钮触发的动作

        $("#chesi").show();
        $('#chesi').animate({
            top: '70px',
        }, 500)

        let stuIndex = $(this).parent().parent().find("td")[0].innerText - 1;
        // let i = 0;
        $("#chesi").find("input").each(function (index, domEle) {
            domEle.value = students[stuIndex][objKeys[index]];//index->i
        });
    });

    let modifyNumber;

    $("tbody").on("click", ".modify", function () {//点击修改按钮触发的动作,解决了jQuery出现的新添加元素点击事件无效问题
        // $("#sbg").addClass("sbg");

        $("#chasi").show();
        $('#chasi').animate({
            top: '70px',
        }, 500)

        modifyNumber = $(this).parent().parent().find("td")[0].innerText - 1;
        let i = 0;
        $("#chasi").find("input").each(function (index, domEle) {
            domEle.value = students[modifyNumber][objKeys[i++]];
        });
    });


    $("#save").click(function () {//点击保存按钮触发的动作
        $("#chasi").find("input").each(function (index, domEle) {
            if (domEle.value)
                students[modifyNumber][objKeys[index]] = domEle.value;
        });
        $("tbody tr").eq(modifyNumber - no + 1).remove();
        $("tbody tr").eq(modifyNumber - no).after("<tr>" + "<td>" + (modifyNumber - no + 1) + "</td>" + "<td>" + students[modifyNumber].htNumber + "</td>" + "<td>" + students[modifyNumber].main + "</td>" + "<td>" + students[modifyNumber].quyu + "</td>" + "<td>" + students[modifyNumber].businessName + "</td>" + "<td>"
            + students[modifyNumber].businessType + "</td>" + "<td>" + students[modifyNumber].inTentType + "</td>" + "<td>" + students[modifyNumber].htzt + "</td>" + "<td>" + students[modifyNumber].InvestmentPer + "</td>" + "<td>" + students[modifyNumber].StartTime + "</td>" + "<td>" + students[modifyNumber].EndTime + "</td>" + "<td> <button class=\"check\">详情</button> <button class=\"modify\">编辑</button><button>删除</button>   </td>" + " </tr>");


        $("#chasi").animate({
            top: "500px",
        },
            500);
        $("#chasi").fadeOut(500);


        // $("#chasi").hide();
        shanchu();

    });


    $(".cancel").click(function () {//多个取消按钮点击触发的动作

        $(".achaesi").animate({
            top: "500px",
        },
            500);
        $(".achaesi").fadeOut(500);

        // $(".achaesi").hide();

    });


    $("tbody tr td:first").click(function () {//全选操作用到了JQuery的隐示迭代
        $("tbody tr td input").prop("checked", $("tbody tr:first td:first input").prop("checked"));
    });

    $("tbody").on("click", $("tbody tr:nth-of-type(1)").siblings().find("input"), function () {
        let isSelectAll = true;
        $("tbody tr:nth-of-type(1)").siblings().find("input").each(function (index, domEle) {
            if ($(domEle).prop("checked") == false)
                isSelectAll = false;
        });
        $("tbody tr:first td:first input").prop("checked", isSelectAll);
    })


    // 添加
    let update = (no) => {
        let i = 0;//用于增加信息条目的变量;
        $("tbody tr:first").siblings().remove();//清空界面
        while (i < 5 && no + i < xuhao) {
            let student = $("<tr>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].htNumber + "</td>" + "<td>" + students[no + i].main + "</td>" + "<td>" + students[no + i].quyu + "</td>" + "<td>" + students[no + i].businessName + "</td>" + "<td>"
                + students[no + i].businessType + "</td>" + "<td>" + students[no + i].inTentType + "</td>" + "<td>" + students[no + i].htzt + "</td>" + "<td>" + students[no + i].InvestmentPer + "</td>" + "<td>" + students[no + i].StartTime + "</td>" + "<td>" + students[no + i].EndTime + "</td>" + "<td> <button class=\"check\">详情</button> <button class=\"modify\">编辑</button> <button>删除</button> </td>" + " </tr>");
            $("tbody").append(student);
            i++;
        }
        $("tbody").trigger("create");
        shanchu();

    }


    $("#cz").click(function () {
        update(no);
    });


    // 下一页
    $("#nextpage").click(function () {
        if (no + 5 < xuhao) {
            no += 5;
            page++;
            $("#pgn").text(page);
            update(no);
            $("tbody tr:first td:first input").prop("checked", false);

        } else {
            layer.alert("最后一页了")
        }

    });




    // 上一页
    $("#lastpage").click(function () {
        if (no - 5 >= 0) {
            no -= 5;
            page--;
            $("#pgn").text(page);
            update(no);
            $("tbody tr:first td:first input").prop("checked", false);

        } else {
            layer.alert("已经是第一页了")
        }

    });

})








$(function () {
    $("table button").mouseover(function () {
        $(this).css("opacity", "calc(0.8)");
    })
    $("table button").mouseout(function () {
        $(this).css("opacity", "calc(1)");
    })
})
$(function () {
    $(".chaxun button").mouseover(function () {
        $(this).css("opacity", "calc(0.8)");
    })
    $(".chaxun button").mouseout(function () {
        $(this).css("opacity", "calc(1)");
    })
})


function shanchu() {
    $("table tbody tr  button:nth-child(3) ").click(function () {
        $(this).parent().parent().remove();
    })

}







$("#btn1").click(function () {

    // $('#chaxun').innerHTML = '';
    $("tbody tr:first").siblings().remove();//清空界面
    let result = students.filter(function (item) { return item.htNumber == htbh.value });

    if (result.length >= 1) {
        (result).forEach(function (value) {
            chaxun.innerHTML += `<tr>     
                                             <td>${value.xuhao}</td>   
                                           <td>${value.htNumber}</td>
                                            <td>${value.main}</td>
                                            <td>${value.quyu}</td>
                                            <td>${value.businessName}</td>
                                            <td>${value.businessType}</td>
                                            <td>${value.inTentType}</td>
                                            <td>${value.htzt}</td>
                                            <td>${value.InvestmentPer}</td>
                                            <td>${value.StartTime}</td>
                                            <td>${value.EndTime}</td>
                                            <td>${value.caozuo}</td>
                                      </tr>`
        });

        // let a = result.length
        // $("#en").text(a);//更新条目数
        shanchu();
        $("table tbody tr  button:nth-child(1) ").addClass("check")
        $("table tbody tr  button:nth-child(2) ").addClass("modify")
    }
    if (result.length < 1) (

        layer.alert("没有")


    )
    htbh.value = "";


});

使用的是一个js文件存数组

let datas = [{ xuhao: 1, htNumber: 12345, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '租房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "雷总", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 2, htNumber: 1223, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "已通过", shenpili: "审批通过", names: "老班长", plane: 1330521590, yixl: "电话", yxlx: "买房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 3, htNumber: 1224, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '租房', htzt: "未生效", InvestmentPer: '张三', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "已拒绝", shenpili: "周周已拒绝", names: "镀锌", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 4, htNumber: 1225, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '租房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "猴心", plane: 13305215904, yixl: "电话", yxlx: "买房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 5, htNumber: 1226, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "聂老八", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 6, htNumber: 1227, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "不浪漫爱情", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 7, htNumber: 1228, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "韩文", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 8, htNumber: 1229, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "聂老八", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 9, htNumber: 1230, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "聂老八", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 10, htNumber: 1231, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "聂老八", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 11, htNumber: 1233, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "聂老八", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 12, htNumber: 1423, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "聂老八", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 13, htNumber: 1244, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "聂老八", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 14, htNumber: 12333, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "聂老八", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 15, htNumber: 12324, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "聂老八", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 16, htNumber: 12221, main: '-', quyu: '-', businessName: '宏基企业', businessType: '一般企业', inTentType: '卖房', htzt: "未生效", InvestmentPer: '李四', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待周周审批", names: "聂老八", plane: 13305215904, yixl: "电话", yxlx: "租房", zsry: "周周", cjsj: "2023-2-25" },
{ xuhao: 17, htNumber: 12245, main: '-', quyu: '-', businessName: '周周公司', businessType: '龙头企业', inTentType: '卖房', htzt: "已生效", InvestmentPer: '张三', StartTime: '2022-09-09 12:23:23', EndTime: '2023--09-09 12:23:23', caozuo: "<button>详情</button><button>续期</button><button>删除</button>", shenpi: "待审核", shenpili: "待审批", names: "周周", plane: 17305215904, yixl: "电话", yxlx: "买房", zsry: "周周", cjsj: "2023-2-25" },];

这是我一个页面的全部代码，如果有需要可以copy。

给个关注吧？？？

周周_加油

关注关注

8
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
后台管理系统增删改查

下面就我的这个后台管理系统发一些片段，希望对学习中的小伙伴提供到参考的价值由于文章有限就只展现一个页面的增删改查代码。整理了一篇关于小白学习的增删改查，但是只是前面阶段的，关于数据库连接在以后的文章才会发出来。这是我一个页面的全部代码，如果有需要可以copy。先给大家看这个增删改查的一个页面，嘿嘿嘿。使用的是一个js文件存数组。
复制链接

扫一扫