【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。