首先，建一个html文档，引入jquery

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>舒尔特方格</title>
</head>
<body>
</body>
<script type="text/javascript" src="js-min.js"></script>
</html>

在html上布置一个div容器，点击这个div，可自动生成一个舒尔特表格。

<div class="warp">
    
</div>

设置div和表格的样式，因为舒尔特表格必须是1cmx1cm的小格子，所以设置入下格式

    <style type="text/css">
        table{
            border: 1px black solid;
            margin: 10px;
            float: left;
            margin-left: 30px;
        }
        tr{
            width: 5.1cm;
        }
        td{
            width: 1.1cm;
            height: 1.1cm;
            border: 1px black solid;
            text-align: center;
        }
        body{
            font-size: 24px;
        }
        .warp{
            width: 24CM;
            height: 30CM;
            background: #ccc;
        }
        .tinyTR{
            font-size: 16px;
            height: 0.5cm;
        }
        .tinyTD{
            height:0.5cm;
        }
    </style>

js部分，随机排序1-25的数组

var arr = [1, 2, 3, 4, 5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];
//产生随机数字
    function randomsort(a, b) {
        return Math.random()>.5 ? -1 : 1;
        //用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
    }
 arr.sort(randomsort);

至此，已经能生成随机排序的arr。全部代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>舒尔特方格</title>
    <style type="text/css">
        table{
            border: 1px black solid;
            margin: 10px;
            float: left;
            margin-left: 30px;
        }
        tr{
            width: 5.1cm;
        }
        td{
            width: 1.1cm;
            height: 1.1cm;
            border: 1px black solid;
            text-align: center;
        }
        body{
            font-size: 24px;
        }
        .warp{
            width: 24CM;
            height: 30CM;
            background: #ccc;
        }
        .tinyTR{
            font-size: 16px;
            height: 0.5cm;
        }
        .tinyTD{
            height:0.5cm;
        }
    </style>
</head>
<body>
<div class="warp">
   
</div>
</body>
<script type="text/javascript" src="js-min.js"></script>
<script type="text/javascript">
    //产生随机数字
    function randomsort(a, b) {
        return Math.random()>.5 ? -1 : 1;
        //用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
    }
    alert('点击灰色区域自动生成');
    $("div").click(function(){
        var arr = [11, 20, 16, 6, 25,4,7,18,9,10,1,12,13,14,5,23,17,8,19,2,21,22,3,24,15];
        arr.sort(randomsort);
        var table = '<table><tr class="tinyTR"><td class="tinyTD">日期</td><td class="tinyTD"></td><td class="tinyTD"></td><td class="tinyTD">成绩</td><td class="tinyTD"></td></tr><tr><td id="m0">'+arr[0]+'</td><td id="m1">'+arr[1]+'</td><td id="m2">'+arr[2]+'</td><td id="m3">'+arr[3]+'</td><td id="m4">'+arr[4]+'</td></tr><tr><td id="m5">'+arr[5]+'</td><td id="m6">'+arr[6]+'</td><td id="m7">'+arr[7]+'</td><td id="m8">'+arr[8]+'</td><td id="m9">'+arr[9]+'</td></tr><tr><td id="m10">'+arr[10]+'</td><td id="m11">'+arr[11]+'</td><td id="m12">'+arr[12]+'</td><td id="m13">'+arr[13]+'</td><td id="m14">'+arr[14]+'</td></tr><tr><td id="m15">'+arr[15]+'</td><td id="m16">'+arr[16]+'</td><td id="m17">'+arr[17]+'</td><td id="m18">'+arr[18]+'</td><td id="m19">'+arr[19]+'</td></tr><tr><td id="m20">'+arr[20]+'</td><td id="m21">'+arr[21]+'</td><td id="m22">'+arr[22]+'</td><td id="m23">'+arr[23]+'</td><td id="m24">'+arr[24]+'</td></tr></table>'
        $(this).append(table);
    });
    


    // $("td").each(function(){
    //     var i = $(this).attr("id").slice(1,3)-1;
    //     $(this).text(arr[i]);
    //     console.log($(this));
    // });
</script>
</html>

效果如下

图片.png

完整源码：下载

15页舒尔特方格A4纸pdf版打包下载