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>

来源

2013-05-05 bladerunner

*“...如果您使用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

Internet Explorer（甚至10）不支持输入元素类型日期。更重要的是：当试图将这种类型（或任何其他不受支持的类型）分配给动态创建的输入元素时，JavaScript将会崩溃并且代码执行将在该点停止。

为了克服这个问题，并默认返回文本类型时，浏览器不支持所需的类型，使用.setAttribute()方法，而不是直接分配：

element2.setAttribute("type", "date");

这个技巧以及更多可以发现here。

来源

2013-05-05 17:04:25

因为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:53:32 Joseph

这是否会阻止添加输入，或者他们是否会获得默认类型？ – 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其他人。

来源

2013-05-05 15:04:24 Barmar

好主意，但请参阅[这里]（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

Javascript在Chrome浏览器中工作，但不在IE中

回答

相关问题