Javascript在Chrome浏览器中工作,但不在IE中
如果您在Chrome中呈现下面的代码,您会发现这样做会很好,但如果您使用IE,则不会添加行。你能告诉我,我在这里做错了什么,它不在IE中工作?当我在IE中添加新行时,我的新行不添加控件。这适用于Chrome和Firefox,但不适用于IE。除非我错过IE特有的东西,否则我找不到代码中的任何错误。我很感谢你的帮助。Javascript在Chrome浏览器中工作,但不在IE中
<head>
<title></title>
<script type="text/javascript">
function insertAdditional() {
var type = document.getElementById('additional_type').value;
var node = document.createElement('li');
node.innerHTML = document.getElementById(type + 'Form').innerHTML;
document.getElementById('additional').appendChild(node);
}
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name = "chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "date";
element2.size = "12";
element2.maxlength = "10";
element2.placeholder = "YYYY-MM-DD";
element2.name = "entrydate[]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "date";
element3.size = "12";
element3.maxlength = "10";
element3.placeholder = "YYYY-MM-DD";
element3.name = "eventdate[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("textarea");
element4.type = "text";
element4.name = "comment[]";
element4.rows = "4";
element4.cols = "60";
cell4.appendChild(element4);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
</script>
</head>
<body>
<h1>
Comments</h1>
<div>
<input type="button" value="Add Comment" onclick="addRow('dataTable')" />
<input type="button" value="Delete Comment" onclick="deleteRow('dataTable')" /> </div>
<table id="dataTable" width="1024px" border="1" cellpadding="10">
<tr>
<th>
<center>
Choose</center>
</th>
<th>
<center>
Entry Date</center>
</th>
<th>
<center>
Event Date</center>
</th>
<th>
<center>
Comment</center>
</th>
</tr>
<tbody>
<tr>
<td>
<input type="checkbox" name="chk[]" />
</td>
<td>
<input type="date" placeholder="YYYY-MM-DD" size="12" maxlength="10" name="entrydate[]" />
</td>
<td>
<input type="date" placeholder="YYYY-MM-DD" size="12" maxlength="10" name="eventdate[]" />
</td>
<td>
<textarea rows="4" cols="60" maxlength="500" name="comment[]"></textarea>
</td>
</tr>
</tbody>
</table>
</body>
Internet Explorer(甚至10)不支持输入元素类型日期。更重要的是:当试图将这种类型(或任何其他不受支持的类型)分配给动态创建的输入元素时,JavaScript将会崩溃并且代码执行将在该点停止。
为了克服这个问题,并默认返回文本类型时,浏览器不支持所需的类型,使用.setAttribute()
方法,而不是直接分配:
element2.setAttribute("type", "date");
这个技巧以及更多可以发现here。
因为IE has no support for date inputs也没有,除了歌剧和几个近期的任何浏览器。 Chrome有部分支持,which started at Chrome 20。
正如在注释中指出的那样,IE在改变输入类型时有点问题。 IE浏览器默认为text
,但要避免的问题,IE's createElement
accepts an HTML string在这里您可以定义类型:
//creating a radio button
var newRadioButton = document.createElement("<input type='radio' />");
这是否会阻止添加输入,或者他们是否会获得默认类型? – 2013-05-05 14:55:50
@squint他们将默认为文本。 OP没有说出发生了什么,但是如果它们变成了文本输入。如果他们不这样做,这是一个全新的故事。 – Joseph 2013-05-05 14:56:25
这个功能很快就会被firefox支持吗?不是我使用它,而是它是一个体面的浏览器。 – 2013-05-05 14:58:11
试试这个:
try {
element2.type = "date";
} catch(e) {
element2.type = "text";
}
这将使用date
输入支持它的浏览器,和秋天回到text
其他人。
好主意,但请参阅[这里](http://diveintohtml5.info/detect.html)一个更好的方法:'element2.setAttribute(“type”,“date”);'本身默认为“text”没有任何错误抛出。 – 2013-05-05 15:06:45
@ShadowWizard你应该把它作为答案 – 2013-05-05 15:14:39
@ShadowWizard:你的解决方案已经解决了IE中的问题。您能否将此作为答案发布,以便将其标记为解决方案。感谢一堆! – bladerunner 2013-05-05 15:32:21
*“...如果您使用IE,行不会被添加...当我在IE中添加一个新行时,我的新行不会添加控件...”*这是什么?该行不会被添加,或者它被添加,但控件不会? – 2013-05-05 14:51:54
对不起,是的控件不会在IE中添加。 – bladerunner 2013-05-05 15:00:22
[jsfiddle](http://jsfiddle.net/NKV8M/)适合想要轻松复制的用户。 – 2013-05-05 15:04:21