js 创建动态标签

 

//*************************************//
//定义方法创建一个label标签
//*************************************//
var createLabel = function(id, name, value) {
    var label_var = document.createElement("label");

    var label_id = document.createAttribute("id");
    label_id.nodeValue = id;

    var label_text = document.createTextNode(value);

    label_var.setAttributeNode(label_id);
    var label_css = document.createAttribute("class");
    label_css.nodeValue = "select_css";
    label_var.setAttributeNode(label_css);
    label_var.appendChild(label_text);

    return label_var;
}

//*************************************//
//定义方法创建input标签（主要为Text）
//id,name,value,type 分别代表创建标签的id,
//   名称（name），值（value），类型（type）
//  绑定Input方法事件，绑定方式如下（可以同时绑定多个事件方法）：
//  "οnchange==alert('This Value is change success !');|οnblur==alert('This value is the beautiful one !');"
//*************************************//
var createInput = function(id, name, value, type, width, height, event) {
    var var_input = null;
    var input_event_attr_IE = "";
    if (event != null && event != "") {
        var event_array_IE = event.toString().split('|');
        for (var i = 0; i < event_array_IE.length; i++) {
            var event_IE = event_array_IE[i].split('==');
            input_event_attr_IE += " " + event_IE[0] + "='' ";
        }
    }
    try {//定义变量实现IE6.0和IE7.0兼容。
        var_input = document.createElement("<input " + input_event_attr_IE + ">");
    } catch (e) {
        var_input = document.createElement("input");
    }

    var input_id = document.createAttribute("id");
    input_id.nodeValue = id;
    var input_name = document.createAttribute("name");
    input_name.nodeValue = name;
    var input_type = document.createAttribute("type");
    input_type.nodeValue = type;
    var input_value = document.createAttribute("value");
    input_value.nodeValue = value;
    var input_style = document.createAttribute("style");
    var input_style_str = "";

    if (width != null && width != "") {
        input_style_str += "width:" + width + "px;";
    } else {
        input_style_str += "width:30px;";
    }
    if (height != null && height != "") {
        input_style_str += "height:" + height + "px;";
    }

    if (event != null && event != "") {
        var event_array = event.toString().split('|');
        for (var i = 0; i < event_array.length; i++) {
            var events = event_array[i].split('==');
            var input_event = document.createAttribute(events[0]);
            input_event.nodeValue = events[1];
            var_input.setAttributeNode(input_event);
        }
    }

    var_input.setAttributeNode(input_type);
    input_style.nodeValue = input_style_str;
    try {
        var_input.setAttributeNode(input_style);
    } catch (e) {
        width = (width == null || width == "") ? "30" : width;
        var_input.setAttribute("width", width);
        if (height != null && height != "") {
            var_input.setAttribute("height", height);
        }
    }
    //    if (readonly != "") {
    //        var input_readonly = document.createAttribute("readonly");
    //        input_readonly.nodeValue = "readonly";
    //        var_input.setAttributeNode(input_readonly);
    //    }

    var_input.setAttributeNode(input_id);
    var_input.setAttributeNode(input_name);
    var_input.setAttributeNode(input_value);

    return var_input;
}

//******************************************************************//
//定义方法创建一个Select选择框的标签；
//*****   id   表示标签的标识id
//*****   name 表示标签的名称name
//*****   options表示标签要绑定的选择项（例如："0231A563-专业类服务|02312177-维保类服务|……")
//*****   splitstr表示用来分割options的字符（如：'|')
//*****   splitchar表示分割键值对的分隔符（如：'-'）
//*****   event 表示此标签对应的事件（当event==null时此标签不绑定事件）
//******************************************************************//
var createSelect = function(id, name, options, splitstr, splitchar, event, selectedValue) {
    var var_select = null;
    try {//处理IE6.0和IE7.0的兼容问题。
        var_select = document.createElement("<select οnchange='' >");
    } catch (e) {
        var_select = document.createElement("select");
    }

    var select_id = document.createAttribute("id");
    select_id.nodeValue = id;
    var select_name = document.createAttribute("name");
    select_name.nodeValue = name;

    if (event != null && event != undefined && event != "") {
        var select_change = document.createAttribute("onchange");
        select_change.nodeValue = event;
        var_select.setAttributeNode(select_change);
    }
    var_select.setAttributeNode(select_id);
    var_select.setAttributeNode(select_name);
    try {
        var_select.setAttribute("width", "100px");
    } catch (e) {
        var select_css = document.createAttribute("class");
        select_css.nodeValue = "select_css";
        var_select.setAttributeNode(select_css);
    }

    splitstr = (splitstr == "" || splitstr == null) ? "|" : splitstr;
    splitchar = (splitchar == "" || splitchar == null) ? "-" : splitchar;

    if (options != null && options != undefined && options.toString() != "") {
        options = (options.toString().lastIndexOf(splitstr) + 1 == options.toString().length) ? options.toString().substr(0, options.toString().length - 1) : options;
        var arrayOption = options.toString().split(splitstr);
        for (var i = 0; i < arrayOption.length; i++) {
            var temp_value = arrayOption[i].split(splitchar);
            var option = document.createElement("option");
            var option_value = document.createAttribute("value");
            option_value.nodeValue = temp_value[0];
            var option_text = document.createTextNode(temp_value[1]);
            option.setAttributeNode(option_value);
            option.appendChild(option_text);

            var_select.appendChild(option);
            if (selectedValue != null && selectedValue != "") {
                if (temp_value[0] == selectedValue || temp_value[1] == selectedValue) {
                    var_select.options[i].selected = true;
                }
            }
        }
    }
    return var_select;
}

//***************************************************//
//定义方法创建一个<a>标签；
//*****   id表示标签唯一表示id
//*****   name表示标签的名称name
//*****   value表示标签对应显示的文字（名称）
//*****   event表示标签对应的事件（当event==null时事件不绑定）
//*****   href表示标签的链接属性
//***************************************************//
var createA = function(id, name, value, event, href, target) {
    var var_a = null;
    try {
        var_a = document.createElement("<a οnclick='' target='_blank'>");  //这里创建必须为"<a οnclick='alert()'>"这种形式来创建否者不支持IE6.0和IE7.0
    } catch (e) {
        var_a = document.createElement("a");
    }
    var a_id = document.createAttribute("id");
    a_id.nodeValue = id;
    var a_name = document.createAttribute("name");
    a_name.nodeValue = name;
    href = (href == null || href == "") ? ("javascript:void(0);" || "#") : href;
    var a_href = document.createAttribute("href");
    a_href.nodeValue = href;

    var a_Text = document.createTextNode(value);

    var_a.setAttributeNode(a_href);
    var_a.setAttributeNode(a_id);
    var_a.setAttributeNode(a_name);
    if (target != null) {
        var target_href = document.createAttribute("target");
        target_href.nodeValue = "_blank";
        var_a.setAttributeNode(target_href);
    }

    if (event != "" && event != null && event != undefined) {
        var a_click = document.createAttribute("onclick");
        a_click.nodeValue = event;
        var_a.setAttributeNode(a_click);
    }
    var_a.appendChild(a_Text); //注意这个值绑定顺序，只能放在最后去绑定（不然不支持IE6.0和IE7.0）

    return var_a;
}

//******************************************//
//定义方法判断输入值是否为数字；
//*******   当flag=true时判断输入值是否为整数；
//******************************************//
var check_Is_Num = function(obj, flag) {
    var flag_var = false;
    var num = /^\d+$/; ///^\+?[1-9][0-9]*$/;
    //flag_var = /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/.test(obj);
    flag_var = /^\d+(\.\d+)?$/.test(obj);
    if (flag) {
        flag_var = num.test(obj);
    }
    return flag_var;
}

//定义方法删除节点。
var removeRowItem = function(obj) {
    var rowTr = obj.parentNode.parentNode;
    try {
        rowTr.removeNode(true);
    } catch (e) {
        rowTr.parentNode.removeChild(rowTr);
    }
}

String.prototype.Trim = function() {
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

 

用法：
//obj表示当前选择控件参数。
//value_str传入值字符串（使用“|”符号分割）
//options服务绑定值（Select控件绑定值）
//tbody_id表示TBody的id属性值，tabel_id表示绑定Table的ID值。
//group表示不同的配置组，当group 不为空时 configType=5
//name_expand  标签名称扩展 用于数据提交
var AddSpecialServiceProject = function(obj, value_str, options, configType, tbody_id, tabel_id, group, name_expand) {
    var newTr = document.createElement("tr");
    var value_array;
    if (value_str == "") {
        value_array = "";
    }
    else {
        value_array = value_str.toString().split('|');
    }
    if (value_array == null) return;

    var service_bom = value_array[0];
    var service_type = value_array[1];
    var service_name = value_array[2];
    var service_price = value_array[3];

    var label_css = document.createAttribute("class");
    label_css.nodeValue = "label_css";

    var newTd = document.createElement("td");
    var product_bom = document.createTextNode("99999999");
    newTd.appendChild(product_bom);
    newTr.appendChild(newTd);

    var input_hidden = "";
    var input_event = "";

    newTd = document.createElement("td");
    input_hidden = createInput("input_ProductType_" + service_bom, "input_ProductType_" + name_expand, service_type, "hidden", null, null, "");
    var type_var = createLabel("label_type_" + service_bom, "label_type", service_type);
    newTd.appendChild(input_hidden);
    newTd.appendChild(type_var);
    newTd.setAttributeNode(label_css);
    newTr.appendChild(newTd);

    newTd = document.createElement("td");
    input_hidden = createInput("input_ProductName_" + service_bom, "input_ProductName_" + name_expand, service_name, "hidden", null, null, "");
    var name_var = createLabel("label_name_" + service_bom, "label_name", service_name);
    label_css = document.createAttribute("class");
    label_css.nodeValue = "label_css";
    newTd.appendChild(input_hidden);
    newTd.setAttributeNode(label_css);
    newTd.appendChild(name_var);
    newTr.appendChild(newTd);

    if (group == null || group == "") {
        newTd = document.createElement("td");
        input_hidden = createInput("hidden_day_" + service_bom, "hidden_day", 1, "hidden", null, null, "");
        input_event = "οnclick==this.select();|οnchange==if(!Check_Is_Num(this.value,false)){alert('输入天数值非法，请重新输入 !');this.value=document.getElementById('hidden_day_" + service_bom + "').value;}else{document.getElementById('hidden_day_" + service_bom + "').value=this.value;}";
        var input_day = createInput("input_day_" + service_bom, "input_day_" + name_expand, 1, "text", null, null, input_event);
        newTd.appendChild(input_day);
        newTd.appendChild(input_hidden);
        newTr.appendChild(newTd);
    }
    //    else {
    //        newTd = document.createElement("td");
    //        newTr.appendChild(newTd);
    //    }

    newTd = document.createElement("td");
    input_hidden = createInput("input_bom_" + service_bom, "input_bom_" + name_expand, service_bom, "hidden", null, null, "");
    var bom_var = createLabel("label_bom_" + service_bom, "label_bom", service_bom);
    newTd.appendChild(bom_var);
    newTd.appendChild(input_hidden);
    newTr.appendChild(newTd);

    newTd = document.createElement("td");
    var selected_value = obj.options[obj.selectedIndex].value;
    if (selected_value == "" || selected_value == undefined) {
        selected_value = obj.options[obj.selectedIndex].innerText;

    }
    var select_var = createSelect("service_" + service_bom, "select_service", options, null, ",", "change_self(this," + configType + ",'" + tbody_id + "');", selected_value);
    newTd.appendChild(select_var);
    newTr.appendChild(newTd);

    newTd = document.createElement("td");
    input_hidden = createInput("hidden_person_" + service_bom, "hidden_person", 1, "hidden", null, null, "");
    if (group == null || group == "") {
        input_event = "οnclick==this.select();|οnchange==if(!Check_Is_Num(this.value,false)){alert('输入的人数值非法，请重新输入 !');this.value=document.getElementById('hidden_person_" + service_bom + "').value;}else{document.getElementById('hidden_person_" + service_bom + "').value=this.value;}";
    } else {
        input_event = "οnclick==this.select();|οnchange== if(!Check_Count(this)){this.value=document.getElementById('hidden_person_" + service_bom + "').value;}else{document.getElementById('hidden_person_" + service_bom + "').value=this.value;}";
    }
    var input_person = createInput("person_" + service_bom, "input_person_" + name_expand, 1, "text", null, null, input_event);
    newTd.appendChild(input_person);
    newTd.appendChild(input_hidden);
    newTr.appendChild(newTd);

    newTd = document.createElement("td");
    input_hidden = createInput("input_ServicePrice_" + service_bom, "input_ServicePrice_" + name_expand, service_price, "hidden", null, null, "");
    var price_var = createLabel("label_price_" + service_bom, "label_price", service_price);
    newTd.appendChild(input_hidden);
    newTd.appendChild(price_var);
    newTr.appendChild(newTd);

    newTd = document.createElement("td");
    input_event = "οnclick==this.select();";
    var select_address = createInput("input_address_" + service_bom, "input_address_" + name_expand, "请输入交付地址", "text", "100", "", input_event); //createSelect("select_address_" + global_var, "select_address", address, "", "", null, null);
    newTd.appendChild(select_address);
    newTr.appendChild(newTd);

    newTd = document.createElement("td");
    input_hidden = createInput("input_type_" + service_bom, "input_type_" + name_expand, 1, "hidden", "", "", null);
    input_event = "οnchange==change_type(this);";
    var option_type = "1-|2-3-4-";
    var select_type = createSelect("select_type_" + service_bom, "select_type", option_type, "", "", input_event, null);
    newTd.appendChild(input_hidden);
    newTd.appendChild(select_type);
    newTr.appendChild(newTd);

    newTd = document.createElement("td");
    var event = "if(confirm('你确定要删除此项配置信息吗？')){removeRowItem(this);}return false;";
    var a_delete = createA("a_delete_" + service_bom, "a_delete", "删除", event, "#");
    newTd.appendChild(a_delete);
    newTr.appendChild(newTd);

    var newTbody = document.getElementById(tbody_id);

    if (newTbody == null || newTbody == undefined) {
        newTbody = document.createElement("TBODY");
        var body_id = document.createAttribute("id");
        body_id.nodeValue = tbody_id
        newTbody.setAttributeNode(body_id);
    }

    var currentTr = obj.parentNode.parentNode.parentNode;
    newTbody.appendChild(newTr);
    document.getElementById(tabel_id).insertBefore(newTbody, currentTr);

    document.getElementById(obj.id).options[0].selected = true;
    if (group != null && group != "") {
        document.getElementById("service_" + service_bom).style.width = "250px";
    }
}