Jquery实现table行数的增加,删除,实现指定行数的添加等应用~~~~!!!!
16lz
2021-01-22
先看下效果图(帮助大家理解实现哪些功能):
先上Html代码:
<body> <div class="center"> <a id="addbottom">添加一行到底部</a><a id="addtop">添加一行到顶部</a> <table border="1px" width="100%"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> </div> </body>
css代码:
<style type="text/css"> .center{ margin-left:auto; margin-right:auto; width:600px; margin-top:100px; } table{ border:1px solid #000; border-collapse:collapse; } thead{ background-color:#C03; color:#FFF;} a{ cursor:pointer;} </style>
jquery:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var i = 1; $("#addbottom").click(function(){ $("<tr><td>"+i+"</td><td></td><td><a id='del'>删除此行</a><a id='addup'>向上添加一行</a><a id='adddown'>向下添加一行</a></td></tr>").appendTo($("tbody")); i++; }); $("#addtop").click(function(){ $("<tr><td>"+i+"</td><td></td><td><a id='del'>删除此行</a><a id='addup'>向上添加一行</a><a id='adddown'>向下添加一行</a></td></tr>").prependTo($("tbody")); i++; }); $("#del").live("click",function(){ $(this).parent("td").parent("tr").remove(); }); $("#addup").live("click",function(){ $(this).parent("td").parent("tr").before($("<tr><td>"+i+"</td><td></td><td><a id='del'>删除此行</a><a id='addup'>向上添加一行</a><a id='adddown'>向下添加一行</a></td></tr>")); i++; }); $("#adddown").live("click",function(){ alert("2"); $(this).parent("td").parent("tr").after("<tr><td>"+i+"</td><td></td><td><a id='del'>删除此行</a><a id='addup'>向上添加一行</a><a id='adddown'>向下添加一行</a></td></tr>") i++; }); }); </script>
更多相关文章
- 我无法理解为什么我的代码中的单击选择文本
- js字符串与html代码互相转换时怪想法:自己解析js字符串成普通字
- 解决FCKEditor编辑器在浏览器返回时显示html源代码的问题
- 高分求:如何解析IdHTTP获得的http代码?用mshttp的IHTMLDocument2可
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原
- HTML显示日期时间代码 - [js 特效代码]
- 解决html代码中插入的图片在浏览器中不显示的办法
- HTML代码格式化工具
- j2ee的web项目,有最终的html代码(即f12看到的最终给用户浏览器展示