当前位置： 代码迷 >> Web前端 >> jquery兑现表格的上移、下移、增加、删除
  详细解决方案

jquery兑现表格的上移、下移、增加、删除

热度：109   发布时间：2013-07-09 09:50:47.0
jquery实现表格的上移、下移、增加、删除
Js代码? ?收藏代码
  1. $(function($){??
  2. ????//元素交换??
  3. ????$(".up").live('click',function(){??
  4. ????????$(this).parent().parent().prev("tr").before($(this).parent().parent());??
  5. ????});??
  6. ????$(".down").live('click',function(){??
  7. ????????$(this).parent().parent().next("tr").after($(this).parent().parent());??
  8. ????});??
  9. ??????
  10. ????$(".delete").live('click',function(){??
  11. ????????$(this).parent().parent().remove();??
  12. ????});??
  13. ??????
  14. ????$(".add").live('click',function(){??
  15. ????????$('<tr?id="'+(i++)+'"><td>'+(i)+'</td><td><input?type?="button"?value="上"?class="up"/><input?type?="button"?value="下"?class="down"/><input?type?="button"?value="删"?class="delete"/><input?type?="button"?value="加"?class="add"/></td></tr>')??
  16. ????????.insertAfter($(this).parent().parent());??
  17. ????});??
  18. });??

?

Html代码? ?收藏代码
  1. <table?width="100"?height="100"?id="table"?border="1">??
  2. ????<tr?id="1">??
  3. ????????<td>1</td><td>??
  4. ????????<input?class="up"?type="button"?value="上">??
  5. ????????<input?class="down"?type="button"?value="下">??
  6. ????????<input?class="delete"?type="button"?value="删">??
  7. ????????<input?class="add"?type="button"?value="加">??
  8. ????????</td>??
  9. ????</tr>??
  10. </table>??
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.