<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>微冷的雨考试成绩统计系统</title>

    <style type="text/css">

      body{

      font-size:30px;

      background:#fff6ed;

      font-family:"楷体";

      }

       #container{

        margin:0px auto;

       }

       #box{

          /* border:1px solid red; */

          overflow:hidden;

       }

       #box label{

       margin-top:5px;

       background:#cde6c7;

        width:80px;

        display:inline-block;

        text-align:right;

        margin-left:50px;

       }

    </style>

    <script type="text/javascript">

       //加载完所有的标签，图片和css后执行

        window.onload=function(){

          var row=15;

          var col=2;

         var mybody=document.getElementById('mybody');

         if(col>4){

           mybody.style.width=document.body.scrollWidth+(col-4)*350;

         }

         //mybody.style.width="3333px";

          initOptions(row,col);

          //alert(body.documentElement.clientWidth);

        // document.body.scrollWidth=3333;

          var cbxs=document.getElementsByName("rchoice");

          for ( var i = 0; i < cbxs.length; i++) {

             cbxs[i].style.cssText="margin-left:20px;";

          }

        };

        //动态加载答题区控件！

        function initOptions(row,column){

           var box=document.getElementById('box');

           //题目编号，从0开始

            var count = 0;

            var mytag; //CheckBox的Tag属性值

           //

            for (var i = 1; i <=row ; i++){  //默认i的值为15

                count++;

                 var mydiv=document.createElement("div");

                  box.appendChild(mydiv);

                  //mydiv.style.border="1px solid blue";

                  // mydiv.style.paddingRight="700px";

                   mydiv.style.overflow="auto";

                for (var j = 1; j <=column; j++){   //默认j的值为2

                     //创建一个label

                    var label=document.createElement('label');

                      //设置座位号

                    if (j == 1)

                    {

                        label.innerHTML = count+ "题";

                         mytag = count;

                    }

                    else

                    {

                        //多列的情况下创建题目编号的方式

                        label.innerHTML = (count +row*(j-1)) + "题";

                        mytag = count + row*(j-1);

                    }

                    var littlediv=document.createElement("div");

                    littlediv.style.float="left";

                    //littlediv.style.border="3px solid blue";

                    mydiv.appendChild(littlediv);

                    littlediv.appendChild(label);

                    //创建四个选项

                    var checkbox1=document.createElement("input");

                    checkbox1.setAttribute("type","checkbox");

                    checkbox1.setAttribute("value","A:"+mytag);

                    checkbox1.setAttribute("name","rchoice");

                    var cbtxt=document.createTextNode("A");

                    littlediv.appendChild(checkbox1);

                    littlediv.appendChild(cbtxt);

                    //第二个checkbox

                      var checkbox2=document.createElement("input");

                    checkbox2.setAttribute("type","checkbox");

                    checkbox2.setAttribute("value","B:"+mytag);

                    checkbox2.setAttribute("name","rchoice");

                    var cbtxt2=document.createTextNode("B");

                    littlediv.appendChild(checkbox2);

                    littlediv.appendChild(cbtxt2);

                    //第三个checkbox

                      var checkbox3=document.createElement("input");

                    checkbox3.setAttribute("type","checkbox");

                    checkbox3.setAttribute("value","C:"+mytag);

                    checkbox3.setAttribute("name","rchoice");

                    var cbtxt3=document.createTextNode("C");

                    littlediv.appendChild(checkbox3);

                    littlediv.appendChild(cbtxt3);

                     //第四个checkbox

                      var checkbox4=document.createElement("input");

                    checkbox4.setAttribute("type","checkbox");

                    checkbox4.setAttribute("value","D:"+mytag);

                    checkbox4.setAttribute("name","rchoice");

                    var cbtxt4=document.createTextNode("D");

                    littlediv.appendChild(checkbox4);

                    littlediv.appendChild(cbtxt4);

                    var myline=document.createElement("br");

                    if(j==column){

                        mydiv.appendChild(myline);

                    }

              }

           }

        }

    </script>

  </head>

  <body id="mybody">

     <div id="container">

         <!-- <fieldset>

          <legend>答题区 :本软件由微冷的雨出品!如有问题，请发送反馈信息到：yymqqc@126.com</legend> -->

          <div id="box">

          </div>

         <!-- </fieldset> -->

     </div>

  </body>

</html>

js动态生成选项之考试系统(一)的更多相关文章

  1. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  2. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  3. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  4. 2）JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  5. qrcode.js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  6. js 动态生成html 触发事件传参字符转义

    通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 “单.双引号不够用” 的情况,别急,这时可以利用 html 语言中的转义字符来解决.下面就来 ...

  7. 爬虫案例(js动态生成数据)

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  8. JS 动态生成JSON对象

    JS 动态生成JSON对象,一般用到JSON传递参数的时候,会用到. function onGeneratedRow(columnsResult) { var jsonData = {}; colum ...

  9. 抓取js动态生成的数据分析案例

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

随机推荐

  1. Problem of saving images in WPF (RenderTargetBitmap)zz

      To save a visual to an image file need to use RenderTargetBitmap, detail is reference to Save and ...

  2. [ACM训练] 算法初级 之 数据结构 之 栈stack+队列queue (基础+进阶+POJ 1338+2442+1442)

    再次面对像栈和队列这样的相当基础的数据结构的学习,应该从多个方面,多维度去学习. 首先,这两个数据结构都是比较常用的,在标准库中都有对应的结构能够直接使用,所以第一个阶段应该是先学习直接来使用,下一个 ...

  3. Canvas 最佳实践（性能篇）

    Canvas 想必前端同学们都不陌生,它是 HTML5 新增的「画布」元素,允许我们使用 JavaScript 来绘制图形.目前,所有的主流浏览器都支持 Canvas. Canvas 最常见的用途是渲 ...

  4. java DOM4J 读取XML

    最近学习Java,在处理XML文档的时候,查阅相关资料,发现了DOM4J这个jre库,相对C#的XML处理来说,功能还算是跟得上 下面展示一篇我自己写的一个XML读取测试 import java.ut ...

  5. mvn使用笔记

    mvn命令格式: You must specify a valid lifecycle phase or a goal in the format <plugin-prefix>:< ...

  6. 9_bootstrap less 移动端

    chrome,firefox提供了"Device Emulation"功能,可模拟常见的各种浏览设备 android ADT或ios Xcode附带的设备模拟器,或第三方在线测试工 ...

  7. CentOS利用postfix搭建邮件服务器

    之前我用nodemailer通过163邮箱来发送邮件,不过没过几天就一直ETIMEDOUT,不知道什么原因,想着还是自己搭一个来发邮件可能靠谱点(flag?) 安装postfix CentOS 7 自 ...

  8. 开源一个C#写的Android和IOS都能跑的 打击感强的RPG玩玩。

    攒到 250楼再统一发一次代码,各位 给力啊 156楼之前的兄弟 都已经发送代码了!各位查收一下!   156楼之后的兄弟要晚上统一发送 200楼之前的兄弟都已经发送代码了!  各位查收一下!!!顺便 ...

  9. myeclipse自动补全增强

    参考资料:http://blog.csdn.net/gaoying_blogs/article/details/43086287

  10. （翻译）开始iOS 7中自动布局教程(二)

    这篇教程的前半部分被翻译出来很久了,我也是通过这个教程学会的IOS自动布局.但是后半部分(即本篇)一直未有翻译,正好最近跳坑翻译,就寻来这篇教程,进行翻译.前半部分已经转载至本博客,后半部分即本篇.学 ...