网站内容更新表(加上对表格进行编辑时，加上id会方便我定位表格)

　　网站内容更新表(加上对表格进行编辑时，加上id会方便我定位表格)

　　. col-xs-* and col-sm-* and col-md-*（col-xs表示超小屏，col-md-中屏，col-sm-小屏）主要用于适配表格显示不同的屏幕。因此，需要自适应地调整相应的值。

　　(3）设置表的id：这里不设置id也是可以的，但是以后想编辑表的时候，加上id会帮我定位表，方法是：tab= document.getElementById("测试")

　　3、Html 文件（添加编辑、提交按钮）

　　根据以上要修改的几点，我重新修改了html内容，新的html代码如下：

　　

表格管理平台

表格管理平台

{% 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('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());

}

});

});

})();

　　对比第2步的html文件，这次我主要加了2条内容：

　　(1）添加编辑、提交按钮：

　　将这两行代码放在表格每一行的最后，就会生成对应的按钮

　　(2）编辑功能的实现：

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

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

　　但是在熟悉了代码之后，我就根据自己对代码的理解做了注释。

　　

(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());

}

});

});

})();

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

　　【第四步】了解JQuery

　　1、提交功能的实现，对我来说，最难的就是html到前台数据的传输。因此，我参考了编辑功能，自己写了一点。这是示例代码：

　　(1）HTML文件编写前端界面提交函数

　　

(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 "数据写入成功！"

　　在实现“提交”功能时，主要遇到以下几个坑：

　　（1）写完html代码后发现程序报错了，说明$.ajax不是函数。我去，看到其他大神也这样写数据交互，为什么可以' t 我这样做？

　　看网上的帖子，都说是undefined或者和其他库有冲突。最后我自己找到了，因为我没有声明它是JQuery。您需要在脚本之前添加一行代码：

　　我理解这行代码的意思是声明下面需要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;

　　结果一无所获

　　就这么一个小问题，我用了将近2个小时，不停的查资料，试着写出来。最后我想说的是，如果你对html不熟悉，你应该找一个大神带上自己的。

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

　　(3）获取每个表的内容

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

　　在获取单元格中的数据时，最验证的就是无法获取到tab，也就是table元素。因为我原来没有给table元素加id，即

　　网上找了很多方法，都实现不了，最后老老实实补充

　　平心而论，这20行html代码是我在启动这个表单管理平台时花费最多的。至此，表单管理平台的功能基本做完了！

　　【第五步】添加新功能

　　以上函数只实现了现有数据的编辑和保存功能，但是如果用户要添加新数据怎么办？我当时的第一个想法就是让用户自己改数据库，哈哈。如果我想写新功能，我已经筋疲力尽，不想写了。

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

　　1、如何添加新按钮

　　

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

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

　　

(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，需要补充元素的type/value/id。

　　4、如何给动态添加的按钮绑定事件，下面以提交函数为例

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

alert("test")

}

　　动态添加按钮的事件绑定的帖子很多，有Live方法，$(document).on('click', '.edit', function()方法，其实没必要这么麻烦，和正常的“提交”写的一模一样。

　　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"

});

});

　　这段代码和提交函数的实现是一样的，差别不大。

　　本文分享自华为云社区《【Python成长之路】从无到有开发网站--基于Flask和JQuery，实现一个表管理平台》，原作者：鹏哥贼优.

　　点击关注，第一时间了解华为云新技术~