jquery 表格删改操作

最新推荐文章于 2022-11-05 10:15:32 发布

睿子

最新推荐文章于 2022-11-05 10:15:32 发布

阅读量583

点赞数

分类专栏： Javascript JQuery 文章标签： jquery button function table border android

本文链接：https://blog.csdn.net/ge_zhiqiang/article/details/6850596

版权

Javascript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

JQuery

9 篇文章 0 订阅

订阅专栏

现在搞android 开发了，因为公司报表有用到jquery，所以闲来，捡捡以前搞过的jquery技术，欢迎拍砖

效果图如下：

table_CRUD.html

<html>

<head>
<title>MY TABLE_CRUD BY jquery</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="table_CRUD.js"></script>

</head>

<body>
<table border="1" width="600px" >
  <tr>
   <th>ID</th>
   <th>NAME</th>
   <th>AGE</th>
   <th>ADDRESS</th>
   <th>ACTION</th>
  </tr>
  <tr>
   <td>0</td>
   <td>ruizi</td>
   <td>20</td>
   <td>shenzhen </td>
   <td><input name="edit" type="button" value="edit" /><input name="del" type="button" value="del" /></td>
  </tr>
  <tr>
   <td>1</td>
   <td>dream</td>
   <td>20</td>
   <td>shenzhen </td>
   <td><input name="edit" type="button" value="edit" /><input name="del" type="button" value="del" /></td>
  </tr>
  <tr>
   <td>2</td>
   <td>qiaoer</td>
   <td>20</td>
   <td>shenzhen </td>
   <td><input name="edit" type="button" value="edit" /><input name="del" type="button" value="del" /></td>
  </tr>
</table>

</body>

</html>

table_CRUD.js

/**
*@auth zhiqiang
*/
$(document).ready(function(){
var person ;
var flag = false;;
$(":button[name='edit']").click( function () {
  if("edit" == ($(this).val())){
   var temp = $(this).parent("td").parent("tr").find("td");
   person = $(this).parent("td").parent("tr").clone(true);
   $(temp).each(function(i){
    if(0 != i && i<($(temp).size()-1)){
     var obj = $("<input type='text' id='txt' value='"+$(this).text()+"' />");
     var value = $(this).text();
     $(this).text("");
     $(this).append(obj);
    }
   });
   $(this).val("save");
   $(this).parent("td").find(":button[name='del']").val("cancel");
  }
  else if("save" == ($(this).val())){
   $(this).val("edit");
   $(this).parent("td").find(":button[name='del']").val("del");
   var temp = $(this).parent("td").parent("tr").find("td");
   $(temp).each(function(i){
    var v = $(this).find("#txt");
    if(0 != i && i<($(temp).size()-1)){
     $(this).text($(v).val());
    }
   });
  }
});

$(":button[name='del']").click(function(){
  if("del" == $(this).val()){
   if(confirm("确定要删除这条记录吗")){
    $(this).parent("td").parent("tr").remove();
   }
  }
  else if("cancel" == $(this).val()){
   $(this).parent("td").parent("tr").html($(person).html());
  }
});
});

睿子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 表格删改操作

现在搞android 开发了，因为公司报表有用到jquery，所以闲来，捡捡以前搞过的jquery技术，欢迎拍砖效果图如下： table_CRUD.html MY TABLE_CRUD BY jquery td{cursor:po
复制链接

扫一扫