zoukankan      html  css  js  c++  java
  • 随机数字动态生成2行8列表格

    //输入数字为num

    function inityumao(){
        
        $.ajax({
            url:"myServlet?requst=inityumao",
            type:"get",
            dataType:"json",
            success:function(json){
                if(json!=null){
                    var num=json.length;
                    if(num>0){
                        var htm='<table width="80%" height="450px">'+
                                   '<tr><td height="80px" colspan="15"></td></tr>';
                        if(parseInt(num/8)>0){
                            htm+='';
                            for(var i=0;i<parseInt(num/8);i++){
                                htm+='<tr><td><div id="NO'+(8*i+1)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                                    '<td><div id="NO'+(8*i+2)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                                    '<td><div id="NO'+(8*i+3)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                                    '<td><div id="NO'+(8*i+4)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                                    '<td><div id="NO'+(8*i+5)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                                    '<td><div id="NO'+(8*i+6)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                                    '<td><div id="NO'+(8*i+7)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                                    '<td><div id="NO'+(8*i+8)+'" class="yumaoDiv" ></div></td></tr>';    
                            }
                            htm+='<tr><td height="20px" colspan="15"></td></tr>';
                            if(num%8!=0){
                                 htm=switchcase(num);
                            }
                        }else{
                                 htm=switchcase(num);
                        }
                        htm+='</table>';
                        $("#yumaos").append(htm);
                    }
                    
                }
            }
        });
    }

    //计算不足8个的部分
    function switchcase(num){
         var htm='<tr>';
         var no=(parseInt(num/8))*8;
         switch(num%8){
          case 1:
              htm+='<td><div id="NO'+(no+1)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                   '<td colspan="13"></td>';
              break;
          case 2:
              htm+='<td><div id="NO'+(no+1)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                     '<td><div id="NO'+(no+2)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                   '<td colspan="11"></td>';
              break;
          case 3:
              htm+='<td><div id="NO'+(no+1)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                     '<td><div id="NO'+(no+2)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                     '<td><div id="NO'+(no+3)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                   '<td colspan="9"></td>';
              break;
          case 4:
              htm+='<td><div id="NO'+(no+1)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                     '<td><div id="NO'+(no+2)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                     '<td><div id="NO'+(no+3)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                     '<td><div id="NO'+(no+4)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                   '<td colspan="7"></td>';
              break;
          case 5:
              htm+='<td><div id="NO'+(no+1)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                    '<td><div id="NO'+(no+2)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                    '<td><div id="NO'+(no+3)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                    '<td><div id="NO'+(no+4)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                    '<td><div id="NO'+(no+5)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                  '<td colspan="5"></td>';
                   break;
          case 6:
              htm+='<td><div id="NO'+(no+1)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                       '<td><div id="NO'+(no+2)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                       '<td><div id="NO'+(no+3)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                       '<td><div id="NO'+(no+4)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                       '<td><div id="NO'+(no+5)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                       '<td><div id="NO'+(no+6)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                  '<td colspan="3"></td>';
                   break;
          case 7:
              htm+='<td><div id="NO'+(no+1)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                    '<td><div id="NO'+(no+2)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                    '<td><div id="NO'+(no+3)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                    '<td><div id="NO'+(no+4)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                    '<td><div id="NO'+(no+5)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                    '<td><div id="NO'+(no+6)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                    '<td><div id="NO'+(no+7)+'" class="yumaoDiv" ></div></td><td class="middletd"></td>'+
                  '<td colspan="1"></td>';
                break;
        }
            htm+='</tr><tr><td height="20px" colspan="15"></td></tr>';
            return htm;
        
    }

  • 相关阅读:
    wss的webpart的3种开发方式(转载)
    C# 2.0学习之集合2
    对C#中的TreeView添加背景图转载
    ASP.NET 2.0: 页面中链入的CSS、js文件带中文时需注意
    C# 2.0学习之泛型
    C# 2.0学习之数组
    连接 ACCESS 2007
    C# 2.0学习之事件2
    一个P2P+搜索音乐网站的策划书(转载)
    关于MOSS的应用和开发的一些联接
  • 原文地址:https://www.cnblogs.com/itzone/p/2953714.html
Copyright © 2011-2022 走看看