1 <html> 2 <head> 3 <title>test</title> 4 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> 5 <script type="text/javascript"> 6 $(function () { 7 //第一步：画界面 8 var sHtml = "<tr>"; 9 var max = 16; 10 for (var i = 1; i <= max; i++) { 11 if (i < max) { 12 sHtml += "<td>" + i + "</td>"; 13 if (i % 4 == 0) { 14 15 sHtml += "</tr><tr>"; 16 } 17 } else { 18 sHtml += "<td></td>"; 19 sHtml += "</tr>"; 20 21 } 22 23 } 24 25 $("#grid").html(sHtml); 26 27 //第二步：处理数字的移动 28 $("#grid td").click(function (e) { 29 //在处理事件之前找到要移动的元素 30 $td = $(this); //得到当前对象 31 32 var idx = $td.prevAll().length; //查找当前元素之前的同辈元素的长度 33 34 var $left = $td.prev(); //查找当前元素之前的一个同辈元素 35 36 var $right = $td.next(); //查找当前之后的一个同辈元素 37 38 var $top = $td.parent().prev().children('td:eq(' + idx + ')'); //查找当前元素上一行对应的位置td 39 40 var $bottom = $td.parent().next().children('td:eq(' + idx + ')'); //查找当前元素下一行对应的的位置td 41 42 43 44 var $target = null; //定义一个目标元素 45 46 //如果目标位置存在并且内容为空,则确定目标元素的位置 47 if ($top && $top.html() == '') { 48 $target = $top; 49 50 } else if ($right && $right.html() == '') { 51 $target = $right; 52 53 } else if ($bottom && $bottom.html() == '') { 54 $target = $bottom; 55 56 } else if ($left && $left.html() == '') { 57 $target = $left; 58 59 } 60 61 62 //如果目标元素不为空 63 if ($target) { 64 //设置目标元素的内容为当前点击td的内容 65 $target.html($td.html()); 66 $td.html(""); //清空点击的td 67 } 68 69 }); 70 }); 71 </script> 72 73 <style type="text/css"> 74 #grid 75 { 76 margin-top: 2em; 77 margin-bottom: 1em; 78 border-collapse: separate; 79 border-spacing: 2px; 80 font-size: 26px; 81 border:2px; 82 padding:2px; 83 } 84 #grid td 85 { 86 border-bottom: soild 1px #B2B2B2; 87 border-right: soild 1px #B2B2B2; 88 background: #F3F3F3; 89 text-align: center; 90 white-space: nowrap; 91 cursor: pointer; 92 padding: 4px; 93 width: 30px; 94 empty-cells: show; 95 border:2px; 96 97 } 98 </style> 99 </head> 100 <body> 101 <div> 102 <center> 103 <table id="grid"> 104 </table> 105 </center> 106 </div> 107 </body> 108 </html>