【Python成長之路】基於Flask框架開發web -- 實現”新增 “功能，並實現簡單的表格管理平臺（5）

【功能】

在表格新增一行，並且能將新增的數據提交到後臺。

 

【實現原理】

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

<td><input type="button" value="新增" id="create"></td><br>

2、點擊新增按鈕後，如何動態增加表格行、列

<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元素。如果表格裏有多列數據，那隻需要重複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("table123");
            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"
                    });
            });

id = table123是我html裏table表的ID，因此tab就是獲取到了表格對象。

rownum是爲了獲取當前新增行（td1即爲當前行）的行號，tab.rows[rownum].cells[0].innerHTML是獲取當前行的第1個元素，通過ajax方法進行數據傳遞。

【小技巧】：如果自己在寫代碼時，發現獲取不到當前行的行號，很大可能是因爲沒有獲取到正確的td。那如何驗證呢，可以在rownum前面加上alert(td.innerHTML)，如果彈窗是正確的行，就會提印“<input type="submit"> value="提交"”；如果彈窗內容是空的，那八成是沒有獲取到正確的td。