1. 程式人生 > >js 用CreateElement動態建立標籤

js 用CreateElement動態建立標籤

//*************************************//

//定義方法建立一個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方法事件,繫結方式如下(可以同時繫結多個事件方法):

//  "onchange==alert('This Value is change success !');|onblur==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 onchange='' >");

    } 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 onclick='' target='_blank'>");  //這裡建立必須為"<a onclick='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, "");

}