首页 新闻 搜索 专区 学院

JQuery可编辑表格插件

0
悬赏园豆:20 [已解决问题] 解决于 2014-01-09 15:47

JQuery可编辑表格插件

单击可以编辑单元格数据,点击单元格以外区域可以取消编辑

可以动态添加行和列

可以动态删除行和列

像时间编辑插件一样点击文本框显示编辑区域

关闭数据编辑区域后可以把数据返回到文本框

有办法实现的大神可以QQ41020273联系我,有报酬。

CoolHots的主页 CoolHots | 初学一级 | 园豆:75
提问于:2013-08-25 19:24
< >
分享
最佳答案
0

<!DOCTYPE>
<html>
<head>
<title>一个实例搞懂css定位</title>
<style>

</style>
<script src="jquery-1.10.2.min.js"></script>
<script>
 $(function(){
  /*单元格模拟excel*/
  function td_excel(){
   $("td").each(function(){
    $(this).click(function(){
     var txt=$(this).text();
     if($(this).find("input").length<1 && $(this).find("button").length!=1){
      if(txt!='')
       $(this).text('');
      $(this).append("<input value='"+txt+"'/>");
      $(this).find("input").focus().blur(function(){
       txt=$(this).prop("value");
       $(this).parent().text(txt);
      });
     };    
    });
   });
  }
  /*增删行*/
  function tr_add_del(){
   $("button").click(function(){
    if($(this).text()=='删除'){
     $(this).parent().parent().remove();
    }else if($(this).text()=='增加'){
     $(this).parent().parent().clone().appendTo("table");
     td_excel();
     tr_add_del();
    };
   });
  }

  td_excel();
  tr_add_del();
 });
</script>
</head>
<body>
<table border=1>
 <tr>
  <td>数据字段1</td>
  <td>数据字段1</td>
  <td>操作1</td>
  <td>操作2</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td><button>删除</button></td>
  <td><button>增加</button></td>
 </tr>
</table>

</body>
</html>

刚刚写的

收获园豆:20
泥沙时代 | 初学一级 |园豆:165 | 2013-08-26 23:03
其他回答(3)
0

这种插件园子里有好多吧,搜搜就有了

二十三号同学 | 园豆:963 (小虾三级) | 2013-08-25 23:35
0

直接Jquery用显示隐藏都能实现~

幻天芒 | 园豆:36672 (高人七级) | 2013-08-26 10:56
0

jquery 有个jqgrid插件 可以实现

cattsoft | 园豆:116 (初学一级) | 2013-09-03 10:55
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册