动态生成HTML元素-模拟在线考试功能

前言

我们在项目开发过程中，经常会遇到页面html元素无法提前预设，而是通过某一些条件动态生成的情况，这里我们需要考虑如下几个因素：

1.需要动态创建的元素类型，比如TextBox, Radio, CheckBox等

2.每一个元素动态命名，确保ID唯一

3.如何获取每一个元素的值

目的

1.预先设定题库

2.创建试卷，并针对该试卷选择题目，题目类型包含单选题与多选题

3.在线生成电子试卷，用户在线考试

4.考试完毕后在线给出得分

代码

通过一个ajax请求，根据考试试卷的名称加载该试卷下所有的试题：

     public void GetItems()
        {
            var sqldb = SqlHelper.createdb("mts");
            string strSql = "usp_get_items";
            var dt = sqldb.GetDataTable(strSql);
            var json = Library.JsonLib.DataTableToJson(dt);
            Response.Write(json);
            Response.End()
        }

      function gen_paper(paper_name) {

            var strhtml_single = "";    //题目类型-单选题
            var strhtml_double = "";    //题目类型-多选题
            var sub_single = "";    //单选题下面的题目
            var sub_double = ""; //多选题下面的题目
            var main_title = "";    //试卷名称
            var strhtml_operation = ""; //操作选项

            $.ajax({
                type: "post",
                url: "exam.aspx?Oper=gen_paper&key=" + Math.random(),
                data: { paper: encodeURIComponent(paper_name) },
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        strhtml_single = "<span id='span_single_01' ><div style='font-weight:bold'>一 单选题</div></span></br>";
                        strhtml_double = "<span id='span_double_01' ><div style='font-weight:bold'>二 多选题</div></span></br>";
                        main_title = "<div style='font-weight:bold;font-size:30px'align='center'>" + paper_name + "<div/>";
                        strhtml_operation = "<a id='btn_save' href='javascript:void(0);' class='easyui-linkbutton c6' style='padding:0 30px;text-align:center' onclick='save_result()'>提交</a>";
                        $(main_title).appendTo("#div_main");
                        $(strhtml_single).appendTo("#div_main");
                        $(strhtml_double).appendTo("#div_main");
                        $(strhtml_operation).appendTo("#div_main");
                        $.parser.parse("#div_main");
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].TYPE_NAME == "单选题") {
                                single_title_id_arr.push(data[i].FID);
                                sub_single = "</br><span>" + (i + 1).toString() + "." + data[i].TITLE + "</span></br><span>" + seting_items(data[i].TYPE_NAME, data[i].ITEMS, "radio_" + i.toString()) + "</span></br>";
                                $(sub_single).appendTo("#span_single_01");
                            }
                            if (data[i].TYPE_NAME == "多选题") {
                                double_title_id_arr.push(data[i].FID);
                                sub_double = "</br><span>" + (i + 1).toString() + "." + data[i].TITLE + "</span></br><span>" + seting_items(data[i].TYPE_NAME, data[i].ITEMS, "ckb_" + i.toString()) + "</span></br>";
                                $(sub_double).appendTo("#span_double_01");
                            }
                        }
                    }
                }
            });
        }

针对单选题与多选题分开处理，在动态创建元素的时候调用这个方法：

        function seting_items(typeName, items, control_name) {
            if (typeName == "单选题") {
                var _single_str = "";
                var _single_value_id = "";
                var arr_single = items.split("@");
                for (var i = 0; i < arr_single.length; i++) {

                    if (i == 0) {
                        _single_value_id = "A";
                    }
                    if (i == 1) {
                        _single_value_id = "B";
                    }
                    if (i == 2) {
                        _single_value_id = "C";
                    }
                    if (i == 3) {
                        _single_value_id = "D";
                    }
                    _single_str += "<input  name='" + control_name + "'  type='radio' value='" + _single_value_id + "' />" + arr_single[i] + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";

                }
                return _single_str;
            }

            if (typeName == "多选题") {
                var _double_str = "";
                var _double_value_id = "";
                var arr_double = items.split("@");
                for (var i = 0; i < arr_double.length; i++) {

                    if (i == 0) {
                        _double_value_id = "A";
                    }
                    if (i == 1) {
                        _double_value_id = "B";
                    }
                    if (i == 2) {
                        _double_value_id = "C";
                    }
                    if (i == 3) {
                        _double_value_id = "D";
                    }
                    _double_str += "<input  name='" + control_name + "'  type='checkbox' value='" + _double_value_id + "' />" + arr_double[i] + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                }

                return _double_str;
            }
        }

取值

元素动态创建完成之后，我们需要取值，方法如下：

        function getRadioBoxValue(radioName) { 

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

                if (obj[i].checked) {
                    return obj[i].value;
                }
            }
            return "undefined";
        }

        function getCheckBoxValue(checkBoxName) {
            var obj = document.getElementsByName(checkBoxName);
            var _select_list = "";
            for (k in obj) {
                if (obj[k].checked) {
                    _select_list += obj[k].value + ",";
                }
            }
            _select_list = _select_list.substring(0, _select_list.length - 1);
            return _select_list;

        }

取到用户选择的项目，我们就可以用来做进一步处理了，比如根据这个值判断用户是否考试合格等等！