js 用CreateElement动态创建标签示例


Posted in Javascript onNovember 20, 2013

//定义方法创建一个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, ""); 
}
Javascript 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
巧用canvas
Jan 21 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
JS实现字体选色板实例代码
Nov 20 #Javascript
jquery实现树形二级菜单实例代码
Nov 20 #Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 #Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 #Javascript
js中的布尔运算符使用介绍
Nov 20 #Javascript
浅析hasOwnProperty方法的应用
Nov 20 #Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 #Javascript
You might like
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
smarty简单入门实例
2014/11/28 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
详解package.json版本号规则
2019/08/01 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
Python跳出多重循环的方法示例
2019/07/03 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
大学生个人推荐信范文
2013/11/25 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
协议书与合同的区别
2014/04/18 职场文书
机电专业求职信
2014/06/14 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年度培训工作总结
2014/11/27 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
中秋节主题班会
2015/08/14 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python