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

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

　　. col-xs-* 和 col-sm-* 和 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。当然，这段代码我也参考了另一位大神。

　　（/Luo201227/article/details/50559988），因为目前我对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不是函数。放我走，我看其他大神也这样写数据交互，为什么我不是在职的？

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

　　我理解这行代码的意思是声明需要下面的JQuery库，而不是其他JS库。（可能会被误解）

　　最后，添加这行代码后，问题就成功解决了！

　　(2）获取当前行号

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

　　最初，从网上获取当前行的方式是：

　　var td = event.parentElement;

var rownum = td.parentElement.rowIndex;

　　通过alert调试，发现点击submit时完全没有反应；它更改为

　　var td = event.srcElement;

var rownum = td.parentElement.rowIndex;

　　结果没有内容

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

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

　　(3）获取每个表的内容

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

　　在获取单元格中的数据时，最验证的是我无法获取选项卡，即表格元素。因为我之前没有给table元素加上id，即

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

　　平心而论，html的这20行代码，是我在开始这个表单管理平台时花费最多精力的地方。至此，表单管理平台的功能基本准备就绪！

　　【第五步】添加新功能

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

　　下面是新特性的介绍和示例代码。

　　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，实现一个表单管理平台》，原作者：鹏哥贼优。

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