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;
        
    }

  • 相关阅读:
    css | js 实现扩展卡片小demo
    ESLint如何配置
    (js描述的)数据结构[哈希表1.3](10)
    (js描述的)数据结构[哈希表1.2](9)
    VSCode——自定义VSCode背景图片
    VSCode 初次写vue项目并一键生成.vue模版
    (js描述的)数据结构[哈希表1.1](8)
    (js描述的)数据结构[字典](7)
    Vue 实战项目: 硅谷外卖(1)
    脑残式网络编程入门(六):什么是公网IP和内网IP?NAT转换又是什么鬼?
  • 原文地址:https://www.cnblogs.com/itzone/p/2953714.html
Copyright © 2011-2022 走看看