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

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;
}

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("");
} 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;
}

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 < 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;
}

//***************************************************//
//定义方法创建一个标签；
//***** 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, "");
}

• < 上一篇

  jqueryiframe操作详细解析_jquery

• 下一篇 >

  JS事件在IE与FF中的区别详细解析_javascript技巧

人气教程排行

• 213次 1 vue2 设置router-view默认路径的实例
• 213次 2 Vue-路由导航菜单栏的高亮设置方法
• 213次 3 基于Axios 常用的请求方法别名(详解)
• 213次 4 JavaScript+canvas实现七色板效果实例
• 212次 5 实现vuex的初始化方法
• 212次 6 jQuery：当鼠标快速移动时无法触发mouseleave事件的问题解决
• 212次 7 Array.slice()与Array.splice()的返回值类型_基础知识
• 212次 8 微信小程序使用swiper组件实现层叠轮播图
• 212次 9 element-ui 限制日期选择的方法(datepicker)
• 212次 10 vue-baidu-map 进入页面自动定位的解决方案(推荐)
• 212次 11 JS实现元素上下左右移动效果
• 212次 12 node.js中的emitter.on方法使用说明
• 211次 13 在js中如何实现图片左右滑动
• 211次 14 layui button 按钮弹出提示窗口,确定才进行的方法
• 211次 15 深入理解Vue生命周期、手动挂载及挂载子组件
• 211次 16 JS 使用for循环遍历子节点查找元素
• 210次 17 bootstrap如何设置表单必填
• 210次 18 bootstrap4兼容哪些浏览器
• 210次 19 jQuery实现追加数组并去重功能
• 210次 20 jQuery实现的在线答题功能_jquery

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！

登录

  记住我的登录 忘记密码？

登录