从零开始做网站开发——基于Flask和JQuery,实现表单管理平台

2023-08-16 1185阅读

col-xs-*和col-sm-*以及col-md-*主要用于适应表格显示不同的屏幕。因此,需要自适应地调整相应的值。其实这里不设置id也是可以的,但是当我以后要编辑表单的时候,添加id会方便我定位到表单。表格管理平台 表格管理平台 {% for i in labels %} {{ i }} {% endfor %} {% for i in content %} {% for j in i %} {{ j }} {% endfor %} {% endfor %} (function(){ $('input[type="button"]').on('click', function(){ var $this = $(this), edit_status = $this.attr('edit_status'), status_value = edit_status && 1 == edit_status ?0 : 1, $td_arr = $this.parent().prevAll; $this.val(1 == status_value ?编辑按钮对应的功能是基于JQuery编写的。() 因为目前我对 JQuery 一无所知。所以我参考编辑功能,自己写了一点。

。 col-xs-*和col-sm-*以及col-md-*(col-xs表示超小屏,col-md-中屏,col-sm-小屏)主要用于适应表格显示不同的屏幕。 因此,需要自适应地调整相应的值。

(3)设置表的ID:。 其实这里不设置id也是可以的,但是当我以后要编辑表单的时候,添加id会方便我定位到表单。 方法为:tab = document.getElementById("test")

3. Html文件(添加编辑、提交按钮)

根据上面要修改的点,我重新修改了html内容,新的html代码如下:

<html lang="en"><head>        <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">     <title>表格管理平台title>head><body><div class="row">    <div class="col-md-12 col-sm-12 col-xs-12">        <div class="panel panel-default">            <div class="panel-heading">                <h3>表格管理平台h3>            div>            <div class="panel-body">                <div class="table-responsive">                    <table class="table table-striped table-bordered table-hover">                        <thead>                        <tr>                            {% for i in labels %}                                <td>{{ i }}td>                            {% endfor %}                        tr>                        thead>                        <tbody>                        {% for i in content %}                            <tr>                                {% for j in i %}                                    <td>{{ j }}td>                                {% endfor %}                                <td><input type="button" value="编辑">td>                                <td><input type="submit" value="提交">td>                            tr>                        {% endfor %}                        tbody>                    table>                div>            div>        div>     div> div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"        crossorigin="anonymous">script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"        crossorigin="anonymous">script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"        crossorigin="anonymous">script><script>    (function(){      $('input[type="button"]').on('click', function(){        var $this = $(this),          edit_status = $this.attr('edit_status'),          status_value = edit_status && 1 == edit_status ? 0 : 1,          $td_arr = $this.parent().prevAll('td');        $this.val(1 == status_value ? '完成' : '编辑').attr('edit_status', status_value);        $.each($td_arr, function(){          var $td = $(this);          if(1 == status_value) {            $td.html(''">');          } else if(0 == status_value){            $td.html($td.find('input[type=text]').val());          }        });      });    })();script>body>html>

与步骤2中的html文件相比,这次我主要添加了2条内容:

(1)添加编辑和提交按钮:

<td><input type="button" value="编辑">td>   <td><input type="submit" value="提交">td>

将这两行代码放在表格每一行的末尾,就会生成对应的按钮

(2)编辑功能的实现:

编辑按钮对应的功能是基于JQuery编写的。 当然这段代码我也参考了另一位大神

() 因为目前我对 JQuery 一无所知。

但在熟悉了代码之后,我根据自己对代码的理解进行了注释。

<script>    (function(){                  $('input[type="button"]').on('click', function(){                    var $this = $(this),          edit_status = $this.attr('edit_status'),          status_value = edit_status && 1 == edit_status ? 0 : 1,          $td_arr = $this.parent().prevAll('td');        $this.val(1 == status_value ? '完成' : '编辑').attr('edit_status', status_value);                    $.each($td_arr, function(){          var $td = $(this);          if(1 == status_value) {            $td.html('<input type="text" value="'+$td.html()+'">');                      } else if(0 == status_value){            $td.html($td.find('input[type=text]').val());          }        });      });    })();script>

细心的同学会发现,当我点击“提交”按钮时,什么也没发生。 是的,就是“提交”功能,我将在下一章介绍。

jquery 特定a 点击事件_点击事件js_alert点击确定事件

[第4步]了解JQuery

jquery 特定a 点击事件_点击事件js_alert点击确定事件

1.提交功能的实现,对于我来说,最困难的就是html到前台数据的传输。 所以我参考编辑功能,自己写了一点。 这是示例代码:

(1) HTML文件编写前端界面提交功能

<script>    (function(){                  $('input[type="submit"]').on('click', function(){                                var td = event.srcElement.parentElement;                var rownum = td.parentElement.rowIndex;                                var tab = document.getElementById("test");                                var data = {                    "ID":tab.rows[rownum].cells[0].innerHTML,                    "网络IP":tab.rows[rownum].cells[1].innerHTML,                    "地址":tab.rows[rownum].cells[2].innerHTML,                    "责任人":tab.rows[rownum].cells[3].innerHTML,                    "联系方式":tab.rows[rownum].cells[4].innerHTML,                };                alert("提交成功!")                $.ajax({                    type: "get",                    url: "/edit",                    data: data,                    dataType: "json"                    });        });        })();

(2)后台读取提交的数据并写入数据库

@app.route('/edit', methods=['get'])def edit():    label = ['ID', '网络IP', '地址', '责任人', '联系方式']    content = [request.args.get(i) for i in label]    print(content)    sql = 'update {0} set {1}="{6}",{2}="{7}",{3}="{8}",{4}="{9}" where {5}={10}'.format('material_table',          label[1], label[2], label[3],label[4],label[0],content[1],content[2],content[3],content[4],content[0])    cur = con.cursor()    cur.execute(sql)    con.commit()    return "数据写入成功!"

在实现“提交”功能时,我主要遇到了以下坑:

从零开始做网站开发——基于Flask和JQuery,实现表单管理平台

(1)html代码写完后,发现程序报错,提示$.ajax不是函数。 我去,我看其他大神的数据交互也是这样写的,我为什么不能这样做呢?

点击事件js_alert点击确定事件_jquery 特定a 点击事件

看网上的帖子,都说是未定义或者与其他库冲突。 最后发现是因为我没有声明它是JQuery。 需要在脚本前添加一行代码:

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js">script>

我理解这行代码的意思是声明需要以下JQuery库,而不是其他JS库。 (可能被误解了)

最后添加这行代码后,问题成功解决!

(2) 获取当前行号

一开始是获取行号,但是获取不到,也不知道如何调试。 在同事的指导下,我学会了使用alert(td.innerHTML)来检查当前行的内容。

最初在网上找到获取当前行的写法是:

var td = event.parentElement;var rownum = td.parentElement.rowIndex;

通过alert调试,发现点击提交根本没有任何反应; 它被改为

var td = event.srcElement;var rownum = td.parentElement.rowIndex;

结果就是什么也得不到

alert点击确定事件_jquery 特定a 点击事件_点击事件js

就这么一个小问题,花了我近2个小时的时间查资料、尝试写。 最后我想说的是,如果你对html不熟悉,你应该找个高手带你一起去。

jquery 特定a 点击事件_alert点击确定事件_点击事件js

最后在别人的帮助下,实现了获取当前行的功能:

(3)获取各个表中的内容

tab.rows[0].cells[0].innerHTML

在获取cell中的数据时,最验证的就是拿不到tab,即table元素。因为我本来就没有给table元素添加id,即

点击事件js_jquery 特定a 点击事件_alert点击确定事件

网上找了很多方法都无法实现,最后老老实实加上了

平心而论,这20行html代码是我在做这个表单管理平台时花费最多精力的地方。 至此,餐桌管理平台的功能就基本到位了!

jquery 特定a 点击事件_点击事件js_alert点击确定事件

jquery 特定a 点击事件_点击事件js_alert点击确定事件

[第5步]添加新功能

jquery 特定a 点击事件_点击事件js_alert点击确定事件

以上功能仅实现了编辑和保存现有数据的功能,但是如果用户想要添加新数据怎么办? 我当时的第一个想法就是让用户自己改数据库,哈哈。 我想写新功能,我要累死了,我不想写。

以下是新功能的介绍和示例代码。

1.如何添加“添加”按钮

<td><input type="button" value="新增" id="create">td><br>

如果前面的html能看懂的话,这一行就不难理解了。

2、点击添加按钮后,如何动态添加表格行和列

<script>     (function () {        $('input[id="create"]').on('click', function(){             var editTable=document.getElementById("tbody");            var tr=document.createElement("tr");            var td1=document.createElement("td");            td1.innerHTML="";             tr.appendChild(td1);            editTable.appendChild(tr);

首先定义 tr 元素,然后将 td 元素附加到 tr 元素。 如果表中有多列数据,只需重复td1的写入并复制粘贴即可。

另外,当前td.innerTHML设置为空,如果想直接将单元格设置为编辑状态,则修改为:

td1.innerHTML="input[type=text] /";

3.如何动态添加“编辑”和“提交”按钮,下面以“编辑”为例

var td9 = document.createElement("td")var myedit =document.createElement("input");myedit.type = "button";myedit.value = "编辑"myedit.id = "edit"td9.appendChild(myedit)

添加方法与添加文本框相同,只是注意元素类型为Input,并且要添加元素的类型/值/id。

4.如何绑定动态添加按钮的事件,下面以submit函数为例

$('input[id="submit"]').on('click', function(){    alert("test")}

有很多关于动态添加按钮的事件绑定的帖子,例如 Live 方法和 $(document)。 提交”的写法完全一样。

5. 获取当前添加行的数据并提交。

 var tab = document.getElementById("test");            var rownum = td1.parentElement.rowIndex;            $('input[id="submit"]').on('click', function(){            var data = {                "ID":tab.rows[rownum].cells[0].innerHTML,            };            alert("新增成功!")            $.ajax({                    type: "get",                    url: "/create",                    data: data,                    dataType: "json"                    });            });

这段代码与提交函数的实现相同,有相似之处和细微差别。

结尾

扫描二维码

VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]