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

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值