【Python成長(zhǎng)之路】從 零做網(wǎng)站開發(fā) -- 基于Flask和JQuery，實(shí)現(xiàn)表格管理平臺(tái)

時(shí)間：2023-07-16 15:06:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-16 15:06:01 來源：網(wǎng)站運(yùn)營(yíng)

【Python成長(zhǎng)之路】從 零做網(wǎng)站開發(fā) -- 基于Flask和JQuery，實(shí)現(xiàn)表格管理平臺(tái)：【寫在前面】

你要開發(fā)網(wǎng)站？ 嗯。。

會(huì)Flask嗎？ 什么東西，沒聽過。。。

會(huì)JQuery嗎？ 是python的庫嗎 ？

那你會(huì)什么？ 我會(huì)F12打開網(wǎng)站

好吧，那我們來寫個(gè)簡(jiǎn)單的表格管理平臺(tái)。

基于Flask框架和JQuery實(shí)現(xiàn)管理平臺(tái)網(wǎng)站的開發(fā)功能，我代碼編寫用了2天的時(shí)間 ，從零開始寫；又對(duì)具體實(shí)現(xiàn)流程，自己斷斷續(xù)續(xù)地整理總結(jié)了近半個(gè)月。從自我感覺來說，整個(gè)過程和結(jié)果的實(shí)現(xiàn)都讓我很滿意。


【效果如下】

【第一步】了解Flask框架

1、了解python 主流的web框架

（1）Django：簡(jiǎn)單來說就是重武器，是最全能的開發(fā)框架，你想要的功能它都有；但是比較繁重，適合企業(yè)級(jí)的web開發(fā)；

（2）Flask：屬于web開發(fā)微框架，小巧靈活，相關(guān)的第三方庫豐富，適合開發(fā)小型web；

（3）Tornado：天生異步，性能強(qiáng)悍，但是框架提供的功能少，需要開發(fā)者自己實(shí)現(xiàn)；

因此，本文代碼實(shí)現(xiàn)主要是基于Flask實(shí)現(xiàn)的。

2、了解Flask框架

（1）HelloWorld實(shí)現(xiàn)：

幾乎所有的編程都是基于“hello world”實(shí)現(xiàn)的，因此也大致講下helloworld涉及的內(nèi)容。

from flask import Flaskapp = Flask(__name__) @app.route('/')def hello_world(): return "Hello world!" if __name__ == '__main__': app.run()先聲明一個(gè)Flask框架的對(duì)象，然后定義路由'/'，即URL地址為 http://127.0.0.1:5000/；如果定義路徑為‘/new’，那對(duì)應(yīng)的訪問地址需要改為http://127.0.0.1:5000/new。另外，@app.route是個(gè)裝飾器。

（2）如何實(shí)現(xiàn)具體IP地址或者端口的訪問呢？

app.run(debug=True,host="x.x.x.x",port="1234")通過對(duì)app.run()方法的參數(shù)定義，分別實(shí)現(xiàn)了調(diào)試功能，訪問URL變更為 http://x.x.x.x:1234

這里調(diào)試功能還是很好用的，不但可以幫助開發(fā)者重新加載網(wǎng)頁，而且會(huì)打印詳細(xì)的錯(cuò)誤信息，協(xié)助定位。

（3）如何在web上顯示自己特定的html模板

from flask import Flask,render_templateapp = Flask(__name__) @app.route('/')def hello_world(): return render_template('test.html') if __name__ == '__main__': app.run()只需要導(dǎo)入render_template庫，并且在函數(shù)返回時(shí)改成對(duì)應(yīng)的方法即可。

不過 這 里要 注意，test.html必須保存在工程目錄與下template文件下，否則會(huì)報(bào)錯(cuò)。（這是因?yàn)閞ender_template方法定義時(shí)默認(rèn)寫了template路徑 ）

【第二步】了解Sqlite3數(shù)據(jù)庫

web數(shù)據(jù)交互離不開后臺(tái)數(shù)據(jù)庫的管理，本章節(jié)重點(diǎn)解釋python自帶的sqlite3數(shù)據(jù)庫。相比較于其他“正規(guī)”的數(shù)據(jù)庫，如mongo、solr、MySQL等，sqlite3相當(dāng)簡(jiǎn)單，屬于輕量級(jí)的數(shù)據(jù)庫。

1、sqlite3數(shù)據(jù)庫的安裝和創(chuàng)建

用pip命令可以下載安裝sqlite3數(shù)據(jù)庫

創(chuàng)建數(shù)據(jù)庫：

con = sqlite3.connect('material.db')如果有數(shù)據(jù)庫material.db，則進(jìn)行連接數(shù)據(jù)庫的操作；如果沒有此數(shù)據(jù)庫，則先創(chuàng)建數(shù)據(jù)庫再進(jìn)行連接；

2、創(chuàng)建數(shù)據(jù)表

label = ['ID','網(wǎng)絡(luò)IP','地址','責(zé)任人','聯(lián)系方式']content = ['1','10.10.10.10','杭州濱江','鵬哥','123456']def create(): sql = 'create table {0} ({1},{2},{3},{4},{5})'.format(tablename,label[0],label[1],label[2],label[3],label[4]) result = cur.execute(sql) con.commit() return True if result else False簡(jiǎn)單描述為：create table 表名 (各字段名1，各字段名2……)

當(dāng)前對(duì)數(shù)據(jù)表的字段未進(jìn)行輸入類型及長(zhǎng)度的限制，比如需要規(guī)則ID為必填項(xiàng)，并且為整形，長(zhǎng)度在10個(gè)字節(jié)內(nèi)，則需要修改為

sql = 'create table matrial_table ("ID" int[10] primary key not null )'同理，其他字段也可以相同的方式進(jìn)行類型、長(zhǎng)度的限制。

注意：在執(zhí)行cur.execute()后，要記得con.commit()進(jìn)行數(shù)據(jù)庫提交，否則數(shù)據(jù)并不會(huì)真正寫入數(shù)據(jù)庫中。

3、插入數(shù)據(jù)

def insert(): sql = 'insert into {0} ({1},{2},{3},{4},{5}) values({6},"{7}","{8}","{9}","{10}")'.format(tablename,label[0],label[1], label[2],label[3],label[4],content[0],content[1],content[2],content[3],content[4]) result = cur.execute(sql) con.commit() return True if result else False簡(jiǎn)單描述為：insert into 表名 (各字段名1，各字段名2……) values(數(shù)值1，數(shù)值2……)

這 里要注意，”{7}“ 是有加雙引號(hào)的，為什么呢？因?yàn)椤眥7}“對(duì)應(yīng)的是網(wǎng)絡(luò)IP，是個(gè)字符串，因此需要加 雙引號(hào)，否則會(huì)報(bào)錯(cuò)。

4、查詢數(shù)據(jù)

def query(): sql = 'select * from {0}'.format(tablename) result = cur.execute(sql) return list(result)簡(jiǎn)單描述為：select XX,XX from 表名 where 字段名1="數(shù)值1"

5、更新數(shù)據(jù)：update 表名 set 字段名1=”數(shù)值1“ where 字段名2="數(shù)值2"

6、刪除某條數(shù)據(jù)：delete from 表名 where 字段名1="數(shù)值1"

【補(bǔ)充】

如果生成了db數(shù)據(jù)庫，如何查看呢？可以下載一個(gè)SQLite Expert，打開后就可以很直觀地進(jìn)行數(shù)據(jù)庫查看，并且可以通過圖形化按鈕進(jìn)行 數(shù)據(jù)表的增刪改查。

【第三步】了解html

1、Flask框架方法編寫

前面已經(jīng)講過 Flask如何調(diào)用html模板，因此我們直接展示上圖對(duì)應(yīng)的flask框架方法的代碼

# coding=utf-8# @Auther : "鵬哥賊優(yōu)秀"# @Date : 2019/9/23# @Software : PyCharm from flask import Flask,render_templateimport sqlite3app = Flask(__name__)con = sqlite3.connect('material.db',check_same_thread=False) @app.route('/')def Material_Mangement(): # 獲取數(shù)據(jù)庫material_table表的內(nèi)容 cur = con.cursor() sql = 'select * from {0}'.format("material_table") cur.execute(sql) content = cur.fetchall() # 獲取數(shù)據(jù)庫表的表頭 labels = [tuple[0] for tuple in cur.description] return render_template('test.html',content=content,labels=labels) if __name__ == '__main__': app.run(debug=True)動(dòng)態(tài)路由、sqlite3數(shù)據(jù)庫操作、調(diào)試模式的設(shè)置，這些知識(shí)請(qǐng)參考之前的博客。但有2個(gè)知識(shí)點(diǎn)，我想再提下：

（1）如果在數(shù)據(jù)庫連接時(shí)，不添加check_same_thread=False參數(shù)，則

數(shù)據(jù)庫連接會(huì)報(bào)錯(cuò)：sqlite3.ProgrammingError: SQLite objects created in a thread can only be used in that same thread. The object was created in thread id XX。

這是因?yàn)閟qlite3數(shù)據(jù)庫被多線程訪問導(dǎo)致沖突，因此這里要注意下。

（2）獲取數(shù)據(jù)庫表頭：labels = [tuple[0] for tuple in cur.description]

2、Html文件（僅展示表格內(nèi)容）

動(dòng)態(tài)路由、sqlite3數(shù)據(jù)庫操作、調(diào)試模式的設(shè)置，這些知識(shí)請(qǐng)參考之前的博客。但有2個(gè)知識(shí)點(diǎn)，我想再提下：

（1）如果在數(shù)據(jù)庫連接時(shí)，不添加check_same_thread=False參數(shù)，則

數(shù)據(jù)庫連接會(huì)報(bào)錯(cuò)：sqlite3.ProgrammingError: SQLite objects created in a thread can only be used in that same thread. The object was created in thread id XX。

這是因?yàn)閟qlite3數(shù)據(jù)庫被多線程訪問導(dǎo)致沖突，因此這里要注意下。

（2）獲取數(shù)據(jù)庫表頭：labels = [tuple[0] for tuple in cur.description]

2、Html文件（僅展示表格內(nèi)容）

<!doctype html><html lang="en"><head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>物料管理平臺(tái)</title></head><body><div class="row"> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="panel panel-default"> <div class="panel-heading"> <h3>表格管理平臺(tái)</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 %} </tr> {% endfor %} </tbody> </table> </div> </div> </div> </div> </div><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><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></body></html>對(duì)應(yīng)的效果是這樣的：

因?yàn)橐婚_始接觸flask時(shí)，我只調(diào)試過html，但是根本沒具體接觸過html怎么寫。因此上述這段代碼是參考于大神的代碼（https://blog.csdn.net/a19990412/article/details/84955802）。

熟悉這段代碼后，我覺得有幾塊內(nèi)容是和我要實(shí)現(xiàn)的代碼有關(guān)的。

（1）title 標(biāo)題修改

（2）表格的長(zhǎng)寬大?。?lt;div class="col-md-6 col-sm-12 col-xs-12"> 。 col-xs-*和col-sm-* 和col-md-*（col-xs表示超小屏幕，col-md-中等屏幕，col-sm-小屏幕）主要是用來適應(yīng)不同屏幕的表格展示。因此需要自適應(yīng)調(diào)整對(duì)應(yīng)的數(shù)值。

（3）設(shè)置表格的ID：<table class="table table-striped table-bordered table-hover"，id="test">。這里其實(shí)不設(shè)置id也是可以的，但是后續(xù)我要對(duì)表格進(jìn)行編輯時(shí)，加上id會(huì)方便我定位表格，方法是：tab = document.getElementById("test")

3、Html文件（添加編輯、提交按鈕）

根據(jù)上述要修改的點(diǎn)，我重新修改了html內(nèi)容，新的html代碼如下：

<!doctype html><html lang="en"><head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>表格管理平臺(tái)</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>表格管理平臺(tái)</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><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><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('<input type="text" value="'+$td.html()+'">'); } else if(0 == status_value){ $td.html($td.find('input[type=text]').val()); } }); }); })();</script></body></html>相比于第 2步時(shí)的html文件，這次我主要添加了2塊內(nèi)容：

（1）添加編輯、提交按鈕：

<td><input type="button" value="編輯"></td> <td><input type="submit" value="提交"></td>將這兩行代碼放在表格每行最后，就會(huì)生成相應(yīng)的按鈕

（2）編輯功能的實(shí)現(xiàn)：

編輯按鈕對(duì)應(yīng)的function是基于JQuery寫的，當(dāng)然這 段代碼我也是參考另一位大神的

（https://blog.csdn.net/luo201227/article/details/50559988），因?yàn)楫?dāng)前我對(duì)JQuery完全一無所知。

但是在熟悉代碼后，我根據(jù)自己對(duì)代碼的理解進(jìn)行了注釋。

<script> (function(){ <!--定義屬于是 button的按鈕在點(diǎn)擊后，產(chǎn)生下面的function功能--> $('input[type="button"]').on('click', function(){ <!--獲取當(dāng)前事件，并進(jìn)行當(dāng)前按鈕的狀態(tài)，如果是編輯狀態(tài)，就進(jìn)行將每個(gè)單元格設(shè)置成可輸入狀態(tài)--> 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); <!--如果單元格是可編輯狀態(tài)，獲取每列元素的值，并在最后html表格上進(jìn)行展示--> $.each($td_arr, function(){ var $td = $(this); if(1 == status_value) { $td.html('<input type="text" value="'+$td.html()+'">'); <!--如果按鈕狀態(tài)是完成狀態(tài)，直接展示單元內(nèi)的值--> } else if(0 == status_value){ $td.html($td.find('input[type=text]').val()); } }); }); })();</script>細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)，我在點(diǎn)擊”提交“按鈕時(shí)，什么都沒 發(fā)生。是的，”提交“功能，我將在下一個(gè)章節(jié)中進(jìn)行介紹。

【第四步】了解JQuery

1、提交功能的實(shí)現(xiàn)，對(duì)我來說，最難的是html對(duì)前臺(tái)數(shù)據(jù)的傳輸。因此，我就參考著編輯功能，自己一 點(diǎn)點(diǎn)寫。以下是示例代碼：

（1）HTML文件編寫前臺(tái)界面提交功能

<script> (function(){ <!--定義屬性是submit的按鈕在點(diǎn)擊后，產(chǎn)生下面的function功能--> $('input[type="submit"]').on('click', function(){ <!--獲取當(dāng)前行的id --> var td = event.srcElement.parentElement; var rownum = td.parentElement.rowIndex; <!--獲取html表格元素 --> var tab = document.getElementById("test"); <!--將每個(gè)單元格元素進(jìn)行取值，并以字典形式傳給后臺(tái) --> var data = { "ID":tab.rows[rownum].cells[0].innerHTML, "網(wǎng)絡(luò)IP":tab.rows[rownum].cells[1].innerHTML, "地址":tab.rows[rownum].cells[2].innerHTML, "責(zé)任人":tab.rows[rownum].cells[3].innerHTML, "聯(lián)系方式":tab.rows[rownum].cells[4].innerHTML, }; alert("提交成功！") $.ajax({ type: "get", url: "/edit", data: data, dataType: "json" }); }); })();（2）后臺(tái)對(duì)提交后的數(shù)據(jù)進(jìn)行讀取，并寫數(shù)據(jù)庫

@app.route('/edit', methods=['get'])def edit(): label = ['ID', '網(wǎng)絡(luò)IP', '地址', '責(zé)任人', '聯(lián)系方式'] 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 "數(shù)據(jù)寫入成功！"在實(shí)現(xiàn)“提交”功能時(shí)，我主要遇到了以下幾個(gè) 坑：

（1）html代碼寫完后，發(fā)現(xiàn)程序報(bào)錯(cuò)，提示$.ajax is not a function。我去，我看其他大神的數(shù)據(jù)交互也是這么寫的呀，為什么我這不行？

查看網(wǎng)上的帖子，都是說未定義或者和其他庫有沖突，最后我自己發(fā)現(xiàn)，是因?yàn)槲覜]有聲明是JQuery。需要在script前面加上一行代碼：

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>我理解這行代碼的意思是聲明下面要JQuery庫，而不是其他JS庫。（可能理解有誤）

最后加上這行代碼后，問題成功解決！

（2）獲取當(dāng)前行號(hào)

一開始在獲取行號(hào)，怎么獲取不到，而且不知道要怎么調(diào)試，在同事的指導(dǎo)下，才學(xué)會(huì)通過alert(td.innerHTML)來查看獲取的當(dāng)前行內(nèi)容是什么。

最初從網(wǎng)上 查到獲取當(dāng)前行的寫法是：

var td = event.parentElement;var rownum = td.parentElement.rowIndex;通過alert調(diào)試，發(fā)現(xiàn)點(diǎn)擊提交根本沒有反應(yīng)；又改成

var td = event.srcElement;var rownum = td.parentElement.rowIndex;結(jié)果是獲取不到任何內(nèi)容

就這么個(gè)小問題就花費(fèi)了我近2個(gè)小時(shí)的時(shí)間去不停地查資料，嘗試編寫。最后想說的是，如果對(duì)html不熟悉，還是應(yīng)該找個(gè)大神帶帶自己的。

最后在別人的協(xié)助下，實(shí)現(xiàn)了獲取當(dāng)前行的功能：

（3）獲取每個(gè)表格里的 內(nèi)容

tab.rows[0].cells[0].innerHTML在獲取單元格內(nèi)數(shù)據(jù)時(shí)，最驗(yàn)證的是我獲取不到tab，即表格元素。因?yàn)槲以葲]有在表格元素里加id，即

網(wǎng)上找了很多方法都沒法實(shí)現(xiàn)，最后老老實(shí)實(shí)地加上 id="test"

講道理，html里的這 20行代碼是我搞這個(gè)表格管理平臺(tái)時(shí)，花費(fèi)最大精力的。至此，表格管理平臺(tái)的功能基本成行 ！

【第五步】添加新增功能

以上功能只實(shí)現(xiàn)了對(duì)現(xiàn)有數(shù)據(jù)的編輯保存功能，但是如果用戶想要新增數(shù)據(jù)，怎么辦？我當(dāng)時(shí)第一個(gè)想法是讓用戶自己去改數(shù)據(jù)庫，哈哈。還要我去寫新增功能，要累死了，不想寫。

下面是關(guān)于新增功能的介紹和示例代碼。

1、如何添加“新增”按鈕

<td><input type="button" value="新增" id="create"></td><br>如果前面 的html能看懂了，這行是不難理解的。

2、點(diǎn)擊新增按鈕后，如何動(dòng)態(tài)增加表格行、列

<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元素，然后在tr元素中再追加td元素。如果表格里有多列數(shù)據(jù)，那只需要重復(fù)td1的寫法，進(jìn)行復(fù)制粘貼就可以了。

另外，當(dāng)前td.innerTHML是設(shè)置為空，如果要將該單元格直接設(shè)置為編輯狀態(tài)，則修改成 :

td1.innerHTML="input[type=text] /";3、如何動(dòng)態(tài)添加“編輯”、“提交”按鈕，下面以“編輯”為例

var td9 = document.createElement("td")var myedit =document.createElement("input");myedit.type = "button";myedit.value = "編輯"myedit.id = "edit"td9.appendChild(myedit)添加方式和添加文本框方式是一樣的，只是需要注意元素類型是Input，并且要補(bǔ)充下元素的type/value/id。

4、如何對(duì)動(dòng)態(tài)添加的按鈕進(jìn)行事件綁定，下面以提交功能為例

$('input[id="submit"]').on('click', function(){ alert("test")}關(guān)于動(dòng)態(tài)添加的按鈕進(jìn)行事件綁定有很多帖子，有用Live方法的，有用$(document).on('click','.edit',function()方法的，其實(shí)不用這么麻煩，和正常的“提交”寫法是完全一樣的。

5、獲取當(dāng)前新增行內(nèi)的數(shù)據(jù)，進(jìn)行提交。

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" }); });這段代碼和提交功能的實(shí)現(xiàn)是一樣的，大同小異。

更多精彩內(nèi)容，請(qǐng)滑至頂部點(diǎn)擊右上角關(guān)注小宅哦~

---

作者：鵬哥賊優(yōu)秀