js-增删改查-2

js实现增删改查-2

增加

var that = null;
    var tha = null;
    // 添加
    function addText() {
      $('.add a').click(function (e) {
        var valu = $(e.target).text();
        if (valu == "添加") {
          $(".addrevise").show();
        }
       
        
      })
      $('.revise-btn a:last-child').click(function (e) {
          if ($('.revise-btn a:last-child').text() == "取消") {
            // 点击取消隐藏添加框
            $(".addrevise").hide();
          }
        })
        $('.revise-btn a:first-child').click(function(){
          if ($('.revise-btn a:first-child').text() == "确定") {
          // 将添加框内容添加到列表中
          $(".tbody").append(`<ul>
                          <li><input type="checkbox"></li>
                          <li>${$('.revise-name input[type="text"]').val()}</li>
                          <li>${$('.revise-uesr input[type="text"]').val()}</li>
                          <li>${getDate()}</li>
                          <li><a href="#">修改</a>  <a href="#">删除</a></li>
                          </ul>`);
          $(".addrevise").hide();
          $('.revise-name input[type="text"]').val("");
          $('.revise-uesr input[type="text"]').val("");
        }
        })
    }
    addText()

修改 、删除、查询

$(document).on("click", "a", function (e) {
      var val = $(this).text();
      // 修改
      if (val == "修改") {
        that = this
        $(".revise").show();
      }
      if (val == "返回") {
        // 点击返回隐藏添加框
        $(".revise").hide();
      }

      if (val == "确认") {
        // console.log(that)
        $(that).parents("ul").children().eq(1).text($('.reviser-name input[type="text"]').val());
        $(that).parents("ul").children().eq(2).text($('.reviser-uesr input[type="text"]').val());
        $(that).parents('ul').children().eq(3).text(getDate())
        $(".revise").hide();
      }
      // 删除
      if (val == "删除") {
        $(this).parent().parent().remove();
        return false;
      }


      // 查询
      if (val == "搜索") {
        var arr = [];
        var arr1 = [];
        // 遍历部门名称并添加到数组中
        $('.tbody ul li:nth-of-type(2)').each(function (index, item) {
          arr.push($(item).text())
          // console.log(arr)
        })
        // 遍历部门代码并添加到数组中
        $('.tbody ul li:nth-of-type(3)').each(function (index, item) {
          arr1.push($(item).text())
          // console.log(arr1)
        })
        for (var i = 0; i < arr.length; i++) {
          for (var j = i; j < i + 1; j++) {
            if ($('.search input[type="text"]').val() == arr[i] ||
              $('.search input[type="text"]').val() == arr1[j]) {
              $('.searchs').append(`
            <ul>
                        <li>${arr[i]}</li>
                        <li>${arr1[j]}</li>
                        <li>${getDate()}</li>
            </ul>            
            `)
              // 2.只留下查询内容
            }
            $('.searchs').show()
          }
        }
      }

      if (val == '退出') {
        $('.searchs').hide()
        $('.search input[type="text"]').val("")
        $('.searchs ul').remove()
      }


    });

实时更新修改、增加、查询的时间

// 查询时间
    function getDate() {
      // 获取提交时间
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      month = month < 10 ? '0' + month : month;
      var day = date.getDate();
      day = day < 10 ? '0' + day : day;
      var hou = date.getHours();
      hou = hou < 10 ? '0' + hou : hou;
      var min = date.getMinutes();
      min = min < 10 ? '0' + min : min;
      var sec = date.getSeconds();
      sec = sec < 10 ? '0' + sec : sec;
      return `${year}-${month}-${day} ${hou}:${min}:${sec}`;
    }

总结：增删改查就是将各个功能都封装为一个函数，在具体功能函数内实现调用。