网页效果：
代码部分:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src='js/jQuery1.11.1.js'></script> <script type="text/javascript"> //生成方法 function doclick(hang, lie) { $("#body").empty(); //var hang = $('#hang').val(); //var lie = $('#lie').val(); var testNum = 1; var br = $('br'); for (var i = 0; i < lie; i++) { var div = buildHTML("div", { id : "div" + i, style : "margin:0 auto;260px;display:inline-block" }); $("#body").css("width", 260 * lie + "px").append(div); for (var j = 0; j < hang; j++) { var span = buildHTML("span", testNum + "题", { style : 'background : RGB(176,224,230)', id : "span" + j }); var A = buildHTML("input", 'A', { type : "checkbox" }); var B = buildHTML("input", 'B', { type : "checkbox" }); var C = buildHTML("input", 'C', { type : "checkbox" }); var D = buildHTML("input", 'D', { type : "checkbox" }); testNum++; $('#div' + i).append(span).append(A).append(B).append(C) .append(D).append("<br/>"); } } }; var BTNclick = function() { var hang = $('#hang').val(); var lie = $('#lie').val(); doclick(hang, lie); } window.onload = function() { doclick(15, 2); $('#btnSC').click(BTNclick); }; buildHTML = function(tag, html, attrs) { if (typeof (html) != 'string') { attrs = html; html = null; } var h = '<' + tag; for (attr in attrs) { if (attrs[attr] === false) continue; h += ' ' + attr + '="' + attrs[attr] + '"'; } return h += html ? ">" + html + "</"+ tag + ">" : "/>"; }; </script> <style type="text/css"> span { font-family: '楷体'; font-size: 26px; } #botom { margin: 0 auto; 790px; clear: both; } #body { margin: 0 auto; } body { margin: 0 auto; background: RGB(217, 228, 246); } </style> </head> <body> <h2 style="font-family: '楷体'; color: blue; 242px; margin: 0 auto">考试成绩统计系统</h2> <div id='body'></div> <div id="botom"> <span>行：</span> <input type='text' id='hang'> <span>列：</span> <input type='text' id='lie'> <input type="button" value='生成' id='btnSC'> <span>姓名：</span> <input type="text" id='name'> <input type="button" value="提交" id='btnTJ'> </div> </body> </html>