js-增删改查-1

通过写一个后台管理系统来实现增删改查操作

1.结构

代码如下：

 <!-- 上方导航栏 -->
  <div class="box">
    <span><img src="./img/nav.png" alt=""></span>
    <div class="guanliyuan">
      <div class="super">超级管理员</div>
      <i ><img src="./img/down.png" alt=""></i>
      <!-- 移入列表 -->
      <div class="select">
        <ul>
          <li>设置</li>
          <li>个人中心</li>
          <li>退出</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 左边导航栏 -->
  <div class="box1">
    <div class="logo">
      <img src="./img/plane.png" alt="">
    </div>
  </div>
  <!-- 搜索栏 -->
  <div class="box2">
    <span class="search">搜索: &nbsp;&nbsp;<input type="text" placeholder="请输入部门名称/部门代码"><a href="#">搜索</a></span>
    <span class="add"><a href="#">添加</a></span>
  </div>
  <!-- 首页-商品管理 -->
  <div class="box3">
    <a href="#">首页</a>
    <i>></i>
    <span>商品管理</span>
  </div>
  <div class="thead">
    <ul>
      <li>
        <input type="checkbox" />
      </li>
      <li>
        部门名称
        <!-- <input type="button" value=""> -->
      </li>
      <li>部门代码</li>
      <li>提交时间</li>
      <li>操作</li>
    </ul>
  </div>
  <div class="tbody">
    <ul>
      <li>
        <input type="checkbox" />
      </li>
      <li>张三</li>
      <li>abc</li>
      <li>2021-09-17 17:13:06</li>
      <li>
        <!-- <a href="#">添加</a> -->
        <a href="#">修改</a>
        <a href="#">删除</a>
      </li>
    </ul>
    <ul>
      <li>
        <input type="checkbox" />
      </li>
      <li>李四</li>
      <li>aby</li>
      <li>2021-09-17 17:13:07</li>
      <li>
        <!-- <a href="#">添加</a> -->
        <a href="#">修改</a>
        <a href="#">删除</a>
      </li>
    </ul>
    <ul>
      <li>
        <input type="checkbox" />
      </li>
      <li>王五</li>
      <li>ycy</li>
      <li>2021-09-17 17:13:08</li>
      <li>
        <!-- <a href="#">添加</a> -->
        <a href="#">修改</a>
        <a href="#">删除</a>
      </li>
    </ul>
    <ul>
      <li>
        <input type="checkbox" />
      </li>
      <li>赵六</li>
      <li>abc</li>
      <li>2021-09-17 17:13:09</li>
      <li>
        <!-- <a href="#">添加</a> -->
        <a href="#">修改</a>
        <a href="#">删除</a>
      </li>
    </ul>
  </div>
  <!-- 添加 -->
  <div class="addrevise">
    <h3>添加信息</h3>
    <div class="revise-name">
      <span>部门名称：</span><input type="text" name="" id="" />
    </div>
    <div class="revise-uesr">
      <span>部门代码：</span><input type="text" name="" id="" />
    </div>
    <div class="revise-btn"><a>确定</a><a>取消</a></div>
  </div>
  <!-- 修改 -->
  <div class="revise">
    <h3>修改信息</h3>
    <div class="reviser-name">
      <span>部门名称：</span><input type="text" name="" id="" />
    </div>
    <div class="reviser-uesr">
      <span>部门代码：</span><input type="text" name="" id="" />
    </div>
    <div class="reviser-btn"><a>确认</a><a>返回</a></div>
  </div>

  <!-- 查询 -->
  <div class="searchs">
    <div class="searchs-btn"><a>退出</a></div>
  </div>

2.样式

代码如下：

 <style>
 * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 14px;
    color: #333;
}

ul {
    list-style: none;
}

.thead,
.tbody {
    width: 1600px;
    margin: 0 178px;
}
.thead{
    position: absolute;
    top: 180px;
    left: 63px;
}
.tbody{
    position: absolute;
    top: 280px;
    left: 63px;
}


.thead ul,
.tbody ul {
    height: 100px;
    width: 100%;
}

.thead ul li {
    font-weight: bold;
    font-size: 20px;
}

.thead ul li,
.tbody ul li {
    float: left;
    width: 20%;
    border: 1px solid #dcdfe6;
    text-align: center;
    height: 100px;
    line-height: 100px;
}

.thead ul li:first-of-type,
.tbody ul li:first-of-type {
    width: 55px;
}


/* 去掉所有tbody的上边框 */

.tbody ul li {
    border-top: none;
    font-size: 18px;
}


/* 除了最后一个li其他都去掉右边边框 */

.tbody ul li:not(:last-child) {
    border-right: none;
}


/* 各行换色 */

.tbody ul:nth-of-type(odd) {
    background-color: #f5f5f5;
}
    .tbody ul li:first-child input:not(:checked) {
      width: 20px;
    }

    a {
      text-decoration: none;
      font-size: 18px;
    }
    /* 上导航栏 */
    .box {
      width: 87.35%;
      height: 60px;
      background-color: #008c8c;
      border: 1px solid;
      /* float: left; */
      position: absolute;
      left: 240px;
    }
    .box span img{
      width: 26px;
      height: 26px;
      position: absolute;
      left: 15px;
      top: 15px;
    }
    

    /* 左导航栏 */
    .box1 {
      width: 12.65%;
      height: 1000px;
      background-color: #008c8c;
      float: left;
      margin-top: 0;
    }
    .box1 .logo img{
      width: 40px;
      height: 40px;
      position: absolute;
      left: 100px;
      top: 20px;
    }
    /* 添加框 */
    .addrevise,
    .revise {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: 500px;
      height: 200px;
      background-color: pink;
      border: 1px solid hotpink;
      text-align: center;
      line-height: 50px;
      display: none;
    }
    /* 修改框 */
    .searchs {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 900px;
      background-color: pink;
      border: 1px solid hotpink;
      text-align: center;
      display: none;
      color: #fff;
    }
    /* 搜索按钮 */
    .searchs-btn a {
      background-color: #008c8c;
      color: white;
      border: none;
      border: 1px solid;
      width: 100px;
      height: 40px;
      padding: 5px;
      position: absolute;
      top: 440px;
      right: 60px;
    }
    /* 修改两按钮 */
    .revise-btn a,
    .reviser-btn a {
      background-color: #008c8c;
      color: white;
      border: none;
      border: 1px solid;
      width: 100px;
      height: 40px;
      padding: 5px;
      margin: 10px;
    }
    /* 上导航栏 */
    .box2 span {
      position: absolute;
      top: 120px;
      left: 260px;
    }
    /* 首页》商品管理 */
    .box3{
      position: absolute;
      top: 80px;
      left: 260px;
    }
    .box3 a{
      font-size: 14px;
      font-weight: 700;
    }
    /* 搜索增加 */
    .search a,
    .add a {
      display: block;
      color: #fff;
      background-color: #008c8c;
      margin-left: 20px;
      margin-top: 5px;
      border: 1px solid;
      width: 50px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      float: right;
      font-size: 14px;
    }
/* 添加 */
    .add a {
      position: absolute;
      left: 290px;
    }
/* 搜索框 */
    .search input {
      height: 40px;
    }
    /* 导航栏鼠标移入效果 */
    .guanliyuan{
      width: 130px;
      height: 59px;
      border: none;
      position: relative;
      float: right;
      /* overflow: hidden; */
      background-color: #008c8c;
    }
    .guanliyuan .super{
      width: 80px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      position: absolute;
      left: 5px;
      top: 14px;
    }
    .guanliyuan i img{
      width: 12px;
      height: 13px;
      position: absolute;
      right: 28px;
      top: 22px;
      color: white;
    }
    .guanliyuan .select{
      width: 200px;
      height: 120px;
      color: white;
      background-color: #008c8c;
      position: absolute;
      right: 5px;
      top: 62px;
      display: none;
      z-index: 8;
    }
    .guanliyuan .select ul li{
      width: 100%;
      height: 40px;
      color: white;
      line-height: 40px;
      padding-left: 16px;
    }
    .guanliyuan:hover .select{
      display: block;
      transition:all 2s linear;
    }
    .guanliyuan:hover{
      background-color: rgb(3, 61, 61);
    }
    .guanliyuan:hover  i img{
      transform: rotate(180deg);
    }
  </style>

①实现全选按钮以及按钮全选功能

 // 设置全选按钮
    $("input[type=checkbox]")
      .eq(0)
      .click(function () {
        if ($(this).prop("checked")) {
          $("ul li:first-child").children().prop("checked", true);
        } else {
          $("ul li:first-child").children().prop("checked", false);
        }
      });
    // 设置单个按钮实现全选
    var arr = [];
    $(".tbody input").each(function (index, item) {
      arr.push($(item));
    });
    // console.log(arr);
    for (var i = 0; i < arr.length; i++) {
      $(arr[i]).click(function () {
        var flag = true;
        for (var j = 0; j < arr.length; j++) {
          if (!$(arr[j]).prop("checked")) {
            flag = false;
          }
        }
        $("input[type=checkbox]").eq(0).prop("checked", flag);
      });
    }

实现思路：
1.给第一个全选按钮绑定点击事件，判断当第一个按钮的checked属性为true时让下方所有按钮的checked属性均为true。反之亦然。
2.利用双循环，先遍历每个按钮添加点击事件，之后判断这些按钮是否有一个的checked属性不是true，若果有则表示不是全选状态，则第一个全选按钮为false，反之为true。