Javascript는 크롬에서는 작동하지만 IE에서는 작동하지 않습니다

크롬에서 아래 코드를 렌더링하면 잘 표시되지만 IE를 사용하면 행이 추가되지 않습니다. 인터넷 익스플로러에서 작동하지 않는 이유가 무엇인지 나에게 설명해 주시겠습니까? IE에서 새 행을 추가 할 때 새 행에 컨트롤이 추가되지 않습니다. 이 크롬과 파이어 폭스에서 잘 작동하지만 IE에서 작동하지 않습니다. 나는 IE에 뭔가 특별한 것을 놓치지 않으면 코드에서 아무 것도 잘못 찾지 못했습니다. 당신의 도움에 감사드립니다.Javascript는 크롬에서는 작동하지만 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에서 새 행을 추가하면 새 행이 컨트롤을 추가하지 않습니다 ..."* 어느 쪽입니까? 행이 추가되지 않거나 추가되지는 않지만 컨트롤은 그렇지 않습니다. –

죄송합니다. 예, 컨트롤이 IE에 추가되지 않습니다. – bladerunner

[jsfiddle] (http://jsfiddle.net/NKV8M/) 쉽게 재현하고 싶은 사람들을 위해. –

Internet Explorer (심지어 10)는 날짜 유형의 입력 요소를 지원하지 않습니다. 그 이상 : 동적으로 생성 된 입력 요소에 이러한 유형 (또는 다른 지원되지 않는 유형)을 할당하려고하면 JavaScript가 오류와 함께 중단되고 그 시점에서 코드 실행이 중지됩니다.

이를 극복하고 브라우저에서 원하는 형식을 지원하지 않는 경우 텍스트로 다시 유형을 기본 대신 직접 할당의 .setAttribute() 방법을 사용하려면

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

이 팁을 훨씬 더 here를 찾을 수 있습니다.

출처

2013-05-05 17:04:25

왜냐하면 IE has no support for date inputs은 Opera와 몇 가지 최신 브라우저가 아니기 때문입니다. Chrome의 부분 지원은 which started at Chrome 20입니다.

의견에서 지적한대로 IE는 입력 유형을 변경할 때 다소 문제가 있습니다. IE는 text 기본값 않습니다,하지만 당신은 유형을 정의 할 수있는, IE's createElement accepts an HTML string을 문제를 방지하기 위해 :

try { 
    element2.type = "date"; 
} catch(e) { 
    element2.type = "text"; 
}

이 그것을 지원하는 브라우저에 date 입력을 사용하며, 가을 :

//creating a radio button 
var newRadioButton = document.createElement("<input type='radio' />");

출처

2013-05-05 14:53:32 Joseph

이렇게하면 입력이 추가되지 않거나 기본 유형을 얻게됩니까? –

@squint 기본값은 텍스트입니다. 텍스트 입력으로 바뀌면 OP는 그것에 대해 아무 말도하지 않았다. 그렇지 않다면 완전히 새로운 이야기입니다. – Joseph

이 기능이 곧 Firefox에서 지원 될 가능성은 있습니까? 내가 사용하지는 않지만 괜찮은 브라우저입니다. –

이 시도를 다른 사람에 text 등을 맞댄.

출처

2013-05-05 15:04:24 Barmar

좋은 생각이지만, 더 좋은 방법은 [here] (http://diveintohtml5.info/detect.html)입니다 :'element2.setAttribute ("type", "date");'디폴트는 "text"그 자체입니다. 주위에 어떤 오류도 던지지 않고. –

@ShadowWizard 당신은 대답으로 넣어야합니다 –

@ShadowWizard : 귀하의 솔루션은 IE에서 문제를 해결했습니다. 이 답변으로 게시 해 주시면 해결책으로 표시 할 수 있습니다. 무리 감사!! – bladerunner

Javascript는 크롬에서는 작동하지만 IE에서는 작동하지 않습니다

답변

관련 문제