jqery实现10X10的表格,双击消失

<script type="text/javascript">
		$(document).ready(function(){
			//循环拼接html
			s="";
			n=1;
			for(i=0;i<10;i++){
				s+="<tr>";
				for(j=0;j<10;j++){
					s+="<td>";
					s+=n;
					n++;
					s+="</td>";
				}
				s+="</tr>";
			}
			//为table添加
			$("#tb_1").append(s);
			
			//为表格添加双击事件
			$("td").dblclick(function(){
				//获得当前双击单元格的内容
				var v=$(this).html();
				var a=parseInt(v);
				$.each($("td"),function(i,n){
					var b=parseInt($(this).html());
					//双击之后的单元格内容都	前移
					if(b>=a){
						//判断是不是最后一个单元格
						if($("td:eq("+(i+1)+")").html()!=null){
							$(n).html($("td:eq("+(i+1)+")").html());
						}else{
							$(n).html(0);
						}												
					}
				});
			});
			
		});		
	</script>
	
  </head>
  <body>
  	<a href="JavaScript:void(0)" id="d1">Hello</a>
  	<table border="1" id="tb_1">
  	
  	
  	</table>		
  </body>


posted @ 2015-09-26 10:17  微软小菜鸟  阅读(271)  评论(0编辑  收藏  举报