laoding
本来我以为,隐身了别人就找不到我,没有用的,像我这样拉风的男人,无论走到哪里,都像在黑暗中的萤火虫一样,那样的鲜明,那样的出众。我那忧郁的眼神,稀疏的胡茬,那微微隆起的将军肚和亲切的笑容......都深深吸引了众人......
posts - 0,  comments - 37,  trackbacks - 0
刚学习jquery不久,今天来玩下表格的动态实现,网上找了一篇文章来参考,稍作修改就放上来了,以便以后学习,参考自:http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
    function gotoAdd(){
        var tableTrElement 
= $("#testTable tr");//得到表格所有行
        var len = tableTrElement.length;//得到总行数
        var tableElement = $("#testTable");//得到表格对象
        tableElement.append("<tr id=test"+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>ding"+len+"</td><td align=\'center\'><input type=\'button\' value=\'delete\' onclick=\'gotoDelete("+(len+1)+")\'/></td></tr>");
    }
    function gotoDelete(index){
        var tableTrElement 
= $("#testTable tr");
         
if(index>tableTrElement.length){
              
return;
          }
else{
              $(
"tr[id=\'test"+index+"\']").remove(); //移除id为 "test"+index 的TR
                   for(var temp=index+1;temp<=tableTrElement.length;temp++){//循环所删除那个TR后面的所有TR
                       $("tr[id=\'test"+temp+"\']").replaceWith("<tr id=test"+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td align=\'center\'>ding"+(temp-2)+"</td><td align=\'center\'><input type=\'button\' value=\'delete\' onclick=\'gotoDelete("+(temp-1)+")\'/></td></tr>");
                     } 
          } 
    }
</script>
</head>

<body>
<input type="button" value="添加行" onclick="gotoAdd()">
 
<table id="testTable" border="1" width="80%" align="center">
     
<tr>
         
<td width="20%" align="center">序号</td>
         
<td align="center">标题</td>
         
<td align="center">操作</td>
     
</tr>    
 
</table>
</body>
</html>
posted on 2009-05-05 21:23 老丁 阅读(3715) 评论(3)  编辑  收藏 所属分类: jquery

FeedBack:
# re: jquery动态表格的简单实现 [未登录]
2009-06-06 11:40 | 葛坤进
上网随便看看,呵呵,竟然是我以前写的一篇文章,不过楼主详细解释了!
学习的精神可嘉!  回复  更多评论
  
# re: jquery动态表格的简单实现
2009-06-07 10:38 | 老丁
@葛坤进
哈哈,学习永无止境啊,嘿嘿!  回复  更多评论
  
# re: jquery动态表格的简单实现
2012-09-01 15:21 | 凝眸
这还不算真正的动态表格哦。
最好是能实现后台创建数据表,而前台可以根据表的id自动创建全新表格,包括表格名称,表格列名和具体的表格内容。最后根据用户权限加载这个人的表格操作按钮,比如添加,修改,删除,查询。
我最为难的问题是:当创建由多个数据表共同组合而成的大表的时候,这问题变得相当繁琐。我暂时的实现办法就比较笨了。。  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
本博客主为学习和复习之用,无关其他,想骂人的绕道
Email:dkm123456@126.com
大家一起交流进步
QQ:283582761


<2024年11月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

留言簿(4)

我参与的团队

文章分类(50)

文章档案(48)

相册

朋友

搜索

  •  

积分与排名

  • 积分 - 95786
  • 排名 - 600

最新评论