兼容IE老版本的动态增加例子

来源：互联网发布：yum update 卡住编辑：程序博客网时间：2024/06/07 13:33

最近项目需要使用前端动态创建元素来制作功能，制作了一个小的demo。使用原生JS发现因某些兼容性问题而不太适用于IE的老版本。

主要有两点:

1.老版本IE（以IE7为例）动态创建元素时，使用createElement()函数来创建元素时，如定义了name属性，在老版本IE中会自动被解析为SubmitName而无法使用document。getElementByName()来进行DOM操作。

2.无法在元素生成时绑定事件。

查阅了相关资料和借鉴各路大神的解决方法，完成了任务。记录一下供自己以后参考。

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>动态增加</title>
</head>

<body>
<input type="button"value="新增" onclick="add(this.parentElement)">
<input type="button"value="check"onclick="check()">
</body>

</html>
<script>
function check() {

var str1 = ""
var str2 = ""
var fqi = /^[1-9]{0,1}\d{1}$|^[1-9]{0,1}\d{1}\.\d{1,2}$/;
var SRate = document.getElementsByName("SRate")
for (j =0; j < fqsettle.length; j++) {
if (fqsettle[j].value == "00") {
alert("请选择期数");
fqsettle[j].focus()
return false
} else {
if (str1.indexOf(fqsettle[j].value)> -1) {
alert("期数不唯一");
fqsettle[j].focus()
return false
} else {
if (SRate[j].value == "") {
alert("请输入扣率")
SRate[j].focus()
return false
} else if (SRate[j].value.toString().match(fqi)== null) {
alert("扣率格式不规范")
SRate[j].focus()
return false
} else {
str1 += fqsettle[j].value + ","
str2 += SRate[j].value + ","
}
}
}
}
console.log(str1)
console.log(str2)
}

function add(o) {
li = createli();
div = creatediv()
header1 = createspan("4em","期数")
area = createspan("1em","")
span1 = createspan("","")
span2 = createspan("","")
span3 = createspan("","")
settle = createsettle()
footer1 = createspan("6em","期")
header2 = createspan("","扣率")
footer2 = createspan("6em","%")
input1 = createinput("0");
input2 = createinput("1");
o.appendChild(li)
li.appendChild(div)
div.appendChild(header1)
div.appendChild(span1)
span1.appendChild(settle)
div.appendChild(footer1)
div.appendChild(header2)
div.appendChild(area)
div.appendChild(span2)
span2.appendChild(input1)
div.appendChild(footer2)
div.appendChild(span3)
span3.appendChild(input2)
}

function creatediv() {
var div = document.createElement("div")
div.style.marginLeft = "13em"
return div
}

function createli() {
var li = document.createElement("li")
return li
}

function createspan(width, node) {
var span = document.createElement("span")
if (width !="") {
span.style.display = "inline-block"
span.style.width = width
span.style.marginLeft = "0.3em"
}
if (node !="") {
text = document.createTextNode(node)
span.appendChild(text)
}
return span
}

function createsettle() {
var settle = createElement("select","fqsettle")
settle.style.fontFamily = "Verdana, Arial, Helvetica, sans-serif, '����', Tahoma"
settle.style.fontSize = "12 px"
option = document.createElement("option")
option.value = "00"
text = document.createTextNode("请选择")
option.appendChild(text)
settle.appendChild(option)
for (i =01; i <= 36; i++) {
settle.appendChild(createoption(i))
}
return settle
}

function createoption(num) {
var option = document.createElement("option")
text = document.createTextNode(num)
option.appendChild(text);
if (num <10) {
option.value = "0" + num
} else {
option.value = num
}
return option
}

function createinput(i) {
var input
if (i ==0) {
input = createElement("input","SRate")
input.type = "text"
input.className = "unnamed1"
input.size = "5"
input.maxLength = "5"
} else
if (i ==1) {
input = document.createElement("input")
document.getElementsByName
input.type = "button"
input.value = "删除"
input.onclick = function() { //适配IE7
var cc = this.parentElement.parentElement.parentElement.parentElement
var dd = this.parentElement.parentElement.parentElement
cc.removeChild(dd)
}
} else {

}
return input
}
//适配IE7
function createElement(type, name) { //解决Name问题
var element = null
try {
element = document.createElement('<'+ type + ' name="' + name + '">');
} catch (error) {}
if (!element) {
element = document.createElement(type);
element.name = name;
}
return element;
}
</script>

阅读全文

0 0