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 相关文章推荐
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 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
最省空间的计数器
2006/10/09 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
js控制框架刷新
2008/08/01 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
简单谈谈python基本数据类型
2018/09/26 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
优秀大学生的自我评价
2014/01/16 职场文书
入党自我评价优缺点
2014/01/25 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
学雷锋倡议书
2015/01/19 职场文书
放弃继承权公证书
2015/01/23 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
宿舍管理制度范本
2015/08/07 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python