Django接口新增页面编写_3（十六）

在完成了页面的布局之后，我们需要让页面动起来，一般来说头部信息需要添加好几个才能完成要求的接口请求。
所以我们在之前的基础要进行键值对输入的新增功能。
由于技术的原因，删除的操作没写出来。
所以最终实现了类似如下图的内容：

新增

把加号移动到了之前的操作位置，下面显示的是序列ID。所以会有诸多不便，但是删除指定行的操作还是等后续能力上升后再补全好了。
下面来看一下新增部分的js代码

$("#head_data_add").click(function () {
        var tr = "<tr>" + '<td>' + flag + '</td>'
            + '<td><input type="text" placeholder="请输入请求键" style="border-radius: 5px"></td>'
            + '<td><input type="text" placeholder="请输入请求值" style="border-radius: 5px"></td>'
            + '<td><input type="text" placeholder="请输入注释" style="border-radius: 5px"></td>'
            + '</tr>';
        $("#head_data").append(tr);
        flag++;
    });

虽然就这么简单的几行，但是由于根本没有系统的学习过js，所以写的很痛苦。
首先是定义了一个变量tr，它是通过字符串的拼接组合而成，可以看到和我们在html静态页面中写的列表的一行内容一样，唯一不同的是使用flag来指明了序号。因为第一行是固定的，所以定义flag的时候是从2开始。在每次操作的最后都会进行flag++的操作，完成计数+1。

html页面

从IDE左侧的标示可以看出修改的部分。这次为table增加了一个id为head_data
为图标增加了一个a标签，并且指向的连接是javascript:void(0)
使用javascript:void(0)点击后html页面不会有任何变化，如果使用#会刷新一次页面。并且为它增加了一个id为head_data_add。
使用id是为了更方便的在js代码中定位到对应元素。
通过几步简单的操作就完成了添加一行键值对输入行的操作了。

效果

下面数据部分同理。

效果

其他部分自行查看github上的代码吧～～
https://github.com/zx490336534/Zxapitest
欢迎关注我的公众号：zx94_11

公众号