layui对key和value键值对表格的新增和编辑功能前端代码

最新推荐文章于 2023-12-21 11:55:40 发布

原来你是小幸运

最新推荐文章于 2023-12-21 11:55:40 发布

阅读量991

点赞数

分类专栏：表格添加 KV参数文章标签： layui

本文链接：https://blog.csdn.net/qq_44741568/article/details/114871749

版权

表格添加同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

KV参数

1 篇文章 0 订阅

订阅专栏

前言:此代码最初来源于博客园FrontGril提供的思路

复制代码前你需要做的

1.将代码里的layui的路径改为你本地的路径,或者是在线的有效的路径

代码

<!DOCTYPE html>
<html id="header">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link rel="stylesheet" href="css/layui.css" media="all">
</head>
<body>
<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;display: none">
<!--    这是点击编辑的时候弹出的框框-->
    <button id="changeID" data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">居中弹出</button>
</div>
<div class="layui-form-item">
    <div class="layui-input-block">
        <table class="layui-table" id="serviceTables">
            <colgroup>
                <col width="60%">
                <col width="20%">
                <col width="20%">
            </colgroup>
            <thead>
            <tr id="trFirst">
                <th>
                    Key
                </th>
                <th><span>Value</span></th>
                <th>操作</th>
            </tr>

            <tr>
                <td><input id="KeyID" type="text" placeholder="请输入" autocomplete="off" class="layui-input"></td>
                <td><input type="text" id="ValueID" placeholder="请输入" autocomplete="off" class="layui-input"></td>
                <td>
                    <button type="button" class="layui-btn layui-btn-xs qrBtn"><i class="layui-icon">确定</i></button>
                </td>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="layui.js" charset="utf-8"></script>
<script type="text/javascript">
     //keyGlobal全局的修改前的key
    var keyGlobal = ""
     //设定的id
    var IDS = 1;
     //存储key的list,防止重复key
    var Lists = new Array();
    layui.use(['upload','form','layer'], function(){
          var $ = layui.jquery
          ,upload = layui.upload
          ,form = layui.form;
    // 确定
    $("#serviceTables").on("click",".qrBtn",function(){
<!--        $("#serviceTables tr:last").remove();-->
        var keys = $("#KeyID").val()
        var values = $("#ValueID").val()
        if(keys=="" || values==""){
        }else if(Lists.includes(keys)){
            alert("Key的值重复了")
        }else{
            Lists.push(keys)
            var newStr = '';
            var serviceName = $(this).parent().parent().find("td:nth-child(1)").find("input").val();
            var servicePrice = $(this).parent().parent().find("td:nth-child(2)").find("input").val();

            newStr += '<tr id='+IDS+'trs >';
            newStr += '<td id='+IDS+'tr>';
            newStr += serviceName;
            newStr += '</td>';
            newStr += '<td  id='+IDS+'value>' + servicePrice + '</td>';
            newStr += '<td><a href="#" class="co-green bjBtn" id=key'+IDS+' οnclick=bianji(this)>编辑</a>  <a href="#" class="co-green" id=value'+IDS+' οnclick=shanchu(this)>删除</a></td>';
            newStr += '</tr>';
            $("#serviceTables").append(newStr);
            $("#KeyID").val("")
            $("#ValueID").val("")
            IDS++;
        }
    });
    });

    function bianji(obj){
        var id = (obj.id).substring(3,(obj.id).length);
        alert("id是: "+id)
        var keys = $("#"+id+"tr").text()
        var tableInfo = "";
        var tableObj = document.getElementById("serviceTables");
        for (var i = 0; i < tableObj.rows.length; i++) {    //遍历Table的所有Row
            if(i<2){
                //跳过表头
                continue;
            }
            if(tableObj.rows[i].cells[0].innerText == keys){
                var a = $("#changeID")
                keyGlobal = keys
                a.click()
                $("#changeKey").val(keys)
                $("#changeValue").val($("#"+id+"value").text())
                //为了点击确定之后获取到对应的id
                $("#hidden").val(id)
            }
        }
    }

    //删除元素
    function shanchu(obj){
        var id = (obj.id).substring(5,(obj.id).length);
        var keys = $("#"+id+"tr").text()
        var thisNode=document.getElementById(id+"trs");
        thisNode.parentNode.removeChild(thisNode);
        //删除元素
        Lists.remove(keys);
    }

    //根据元素值删除list的元素
    Array.prototype.remove = function(val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
        }
    };

    function one(){
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block'
   }

    function change(){
    //这是执行编辑的逻辑的函数
    //1.获取参数
    var key = $("#changeKey").val()
    var value = $("#changeValue").val()
    var ids = $("#hidden").val()
    //2.判断key是否不变或者已经在list里
    if(key == keyGlobal || !Lists.includes(key)){
        //3.删除list里原先的值 加入新的值
        Lists.remove(keyGlobal);
        Lists.push(key)
        alert("更改后的key是: "+key)
        alert("更改后的value是: "+value)
        alert("更改前的id是: "+ids)
        //4.根据id更改参数
        $("#"+ids+"tr").text(key)
        $("#"+ids+"value").text(value)
    }else{
        alert("包含重复key")
    }
}

</script>
<script>
layui.use('layer', function(){ //独立版的layer无需执行这一句
  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
  //触发事件
  var active = {
    offset: function(othis){
      var type = othis.data('type')
      ,text = othis.text();

      layer.open({
        type: 1
        ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
        ,id: 'layerDemo'+type //防止重复弹出
        ,content: '<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">Key:</label><div class="layui-input-inline"><input id="changeKey" type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">Val:</label><div class="layui-input-inline"><input id="changeValue" type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input"></div></div></div><input type="hidden" id="hidden"/>'
        ,btn: '确认更改'
        ,btnAlign: 'c' //按钮居中
        ,shade: 0 //不显示遮罩
        ,yes: function(){
            change()
            layer.closeAll();

        }
      });
    }
  };

  $('#layerDemo .layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });
});
</script>
</body>
</html>