随机数字动态生成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;
    
}

原文地址:https://www.cnblogs.com/itzone/p/2953714.html