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代码如下：
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
表格管理平台
表格管理平台
{% for i in labels %}
{{ i }}
{% endfor %}
{% for i in content %}
{% for j in i %}
{{ j }}
{% endfor %}
{% endfor %}
crossorigin="anonymous">
crossorigin="anonymous">
crossorigin="anonymous">
(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());
}
});
});
})();细心的同学会发现，当我点击“提交”按钮时，什么也没发生。 是的，就是“提交”功能，我将在下一章介绍。[第4步]了解JQuery1.提交功能的实现，对于我来说，最困难的就是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不是函数。 我去，我看其他大神的数据交互也是这样写的，我为什么不能这样做呢？看网上的帖子，都说是未定义或者与其他库冲突。 最后发现是因为我没有声明它是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在获取cell中的数据时，最验证的就是拿不到tab，即table元素。因为我本来就没有给table元素添加id，即网上找了很多方法都无法实现，最后老老实实加上了平心而论，这20行html代码是我在做这个表单管理平台时花费最多精力的地方。 至此，餐桌管理平台的功能就基本到位了！[第5步]添加新功能以上功能仅实现了编辑和保存现有数据的功能，但是如果用户想要添加新数据怎么办？ 我当时的第一个想法就是让用户自己改数据库，哈哈。 我想写新功能，我要累死了，我不想写。以下是新功能的介绍和示例代码。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，并且要添加元素的类型/值/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"
});
});这段代码与提交函数的实现相同，有相似之处和细微差别。结尾扫描二维码}