管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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, "");

　　}

教程首页 更多教程