。  col-xs-*和col-sm-* 和col-md-*(col-xs表示超小屏幕，col-md-中等屏幕，col-sm-小屏幕)主要是用来适应不同屏幕的表格展示。因此需要自适应调整对应的数值。

(3)设置表格的ID：

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

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

integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

表格管理平台

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)编辑功能的实现：

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

(https://blog.csdn.net/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 is not a function。我去，我看其他大神的数据交互也是这么写的呀，为什么我这不行？

查看网上的帖子，都是说未定义或者和其他库有冲突，最后我自己发现，是因为我没有声明是JQuery。需要在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;

结果是获取不到任何内容

就这么个小问题就花费了我近2个小时的时间去不停地查资料，尝试编写。最后想说的是，如果对html不熟悉，还是应该找个大神带带自己的。

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

(3)获取每个表格里的 内容

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

在获取单元格内数据时，最验证的是我获取不到tab，即表格元素。因为我原先没有在表格元素里加id，即

网上找了很多方法都没法实现，最后老老实实地加上 id="test"

讲道理，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元素，然后在tr元素中再追加td元素。如果表格里有多列数据，那只需要重复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"

});

});

这段代码和提交功能的实现是一样的，大同小异。