博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery实现表格增加/删除行的操作
阅读量:6443 次
发布时间:2019-06-23

本文共 2125 字,大约阅读时间需要 7 分钟。

hot3.png

<部分参考网上>  晕,再次编辑不能出效果了,无奈把演示删掉了,拷到本地再测试,记住要指定正确jquery.js的路径

			
 
$(document).ready(function (){ $("#name").focus(); $("#addBtn").click(function (){ //alert("向表格中添加一行数据"); var str = getNewRowStr(); // alert(str); $("#table1").append(str); clearText(); }); }); function delRow(index){ //删除该行 $("#tr" + index).remove(); } function clearText(){ $("#name").val(""); $("#age").val(""); $("#sex").val(""); $("#name").focus(); } function getNewRowStr(){ //每次增加一行则len+1 //var len = $("#table1 tr").length; var len = $("#table1").find("tr").length; var name = $("#name").val(); var age = $("#age").val(); var sex = $("#sex").val(); var str = '
'+ name +'' +sex+''+age +'
'; return str; }
姓名:
性别: 
年龄: 
姓名性别年龄

// 来自评论 整理的更好的方法:Script 改进(思路更清晰)        
            $(document).ready(function (){                //$("#name").focus(); input框输入内容然后刷新页面,input框内容还在(firefox)                clearText(); // 改用clearText                $("#addBtn").click(function (){                     $("#table1").append(getNewRow());                     clearText();                 });                $("#table1").on('click', ".delBtn", function (){                    $(this).parent().parent().remove();                });            });             function clearText(){                 $("#name").val("");                 $("#age").val("");                 $("#sex").val("");                 $("#name").focus();             }            function getNewRow(){                var btn = $("
");                var newRow = $("").append($("").append($("#name").val()))                                        .append($("").append($("#age").val()))                                        .append($("").append($("#sex").val()))                                        .append($("").append(btn));                return newRow;             }        

转载于:https://my.oschina.net/cwzhang/blog/203393

你可能感兴趣的文章
【译】Swift算法俱乐部-双端队列
查看>>
学习OpenGL ES之激光特效
查看>>
weex踩坑之image图片在ios/Android不显示
查看>>
文章整理
查看>>
MySQL实数类型使用注意事项
查看>>
GitText记录
查看>>
法力无边的stage-0
查看>>
Arouter原理分析
查看>>
[Android开发艺术探索阅读笔记]第9章 四大组件的工作过程
查看>>
Android设计模式探讨--Builder模式
查看>>
ES6 在日常工作中的运用
查看>>
App视频邀请功能
查看>>
OpenCV学习之旅 简介
查看>>
这次,彻底弄懂接口及抽象类
查看>>
go公链实战0x03数据持久化
查看>>
阿里巴巴IPv6应用平台引领下一代互联网
查看>>
redis管道
查看>>
BCH何以独当一面
查看>>
行业风云骤起,母婴产品何以抢占市场红利?
查看>>
人人都能学会的python编程教程1:第一行代码
查看>>