您好,欢迎访问一九零五行业门户网

js 用CreateElement动态创建标签示例_javascript技巧

//定义方法创建一个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 var event_ie = event_array_ie[i].split('==');
input_event_attr_ie += + event_ie[0] + ='' ;
}
}
try {//定义变量实现ie6.0和ie7.0兼容。
var_input = document.createelement();
} 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 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();
} 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 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;
}
//***************************************************//
//定义方法创建一个标签;
//***** 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(); //这里创建必须为这种形式来创建否者不支持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, );
}
其它类似信息

推荐信息