IE에서 행을 동적으로 추가할 수 없습니까?
JSON 객체를 다운로드하고 데이터를 사용하여 Javascript DOM 함수를 사용하여 HTML <table>에 행을 추가하는 AJAX 애플리케이션을 가지고 있습니다.완벽하게 작동합니다.Internet Explorer를 제외하고.IE는 어떤 종류의 오류도 주지 않으며, 저는 브라우저에 의해 코드가 실행되고 있다는 것을 가능한 한 확인했지만, 그것은 단순히 아무런 효과가 없습니다.문제를 설명하기 위해 이 빠르고 더러운 페이지를 만들었습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>
<table id="employeetable">
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</table>
<script type="text/javascript">
function addEmployee(employeeName, employeeJob) {
var tableElement = document.getElementById("employeetable");
if (tableElement) {
var newRow = document.createElement("tr");
var nameCell = document.createElement("td");
var jobCell = document.createElement("td");
nameCell.appendChild(document.createTextNode(employeeName));
jobCell.appendChild(document.createTextNode(employeeJob));
newRow.appendChild(nameCell);
newRow.appendChild(jobCell);
tableElement.appendChild(newRow);
alert("code executed!");
}
}
setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000);
setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000);
setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000);
</script>
</body></html>
IE 8을 사용해 본 적은 없지만 IE 7과 IE 6 모두 추가될 것으로 예상되는 추가 행이 표시되지 않습니다.왜 그런지 모르겠어요.이 문제에 대한 좋은 해결 방법을 아는 사람이 있습니까? 아니면 제가 뭔가 잘못하고 있는 것 같습니다.
다음과 같이 새 TR을 추가할 TBODY 요소를 만든 다음 테이블에 TBODY를 추가해야 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body>
<table id="employeetable">
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</table>
<script type="text/javascript">
function addEmployee(employeeName, employeeJob) {
var tableElement = document.getElementById("employeetable");
if (tableElement) {
var newTable = document.createElement('tbody'); // New
var newRow = document.createElement("tr");
var nameCell = document.createElement("td");
var jobCell = document.createElement("td");
nameCell.appendChild(document.createTextNode(employeeName));
jobCell.appendChild(document.createTextNode(employeeJob));
newRow.appendChild(nameCell);
newRow.appendChild(jobCell);
newTable.appendChild(newRow); // New
tableElement.appendChild(newTable); // New
alert("code executed!");
}
}
setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000);
setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000);
setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000);
</script>
</body></html>
IE에서는 테이블 요소가 아닌 TBody 요소에 행을 추가해야 합니다.Ruby-Forum에서 토론을 참조하십시오.
거기서 논의를 확장하면, <table> 마크업은 일반적으로 명시적인 <thead>와 <tbody> 마크업 없이 수행되지만, <tbody> ELENT는 실제로 당신이 당신의 새로운 행을 추가해야 하는 곳입니다. 왜냐하면 <table>에는 <tr> 요소가 직접 포함되어 있지 않기 때문입니다.
편집: 이제 IE에서 작동합니다! insertSiblingNodesAfter는 형제자매의 parentNode를 사용합니다. 이 노드는 IE의 본문에 있습니다.
DOM 크로스 브라우저를 조작하려고 할 때 어떤 특이점이 있는지 알기 어렵습니다.모든 주요 브라우저에서 완벽하게 테스트된 기존 라이브러리를 사용하는 것이 좋습니다.
개인적으로 저는 MochiKit을 사용하며, 여기에서 DOM 조작에 대해 자세히 알아볼 수 있습니다. http://mochikit.com/doc/html/MochiKit/DOM.html
최종 기능은 다음과 같습니다.
function addEmployee(employeeName, employeeJob) {
var trs = getElementsByTagAndClassName("tr", null, "employeetable");
insertSiblingNodesAfter(trs[trs.length-1], TR({}, TD({}, employeeName), TD({}, employeeJob));
alert("code executed!");
}
언급URL : https://stackoverflow.com/questions/812693/cant-dynamically-add-rows-to-a-table-in-ie
'programing' 카테고리의 다른 글
| 시공자 주입이 다른 옵션보다 우수한 이유 설명 (0) | 2023.09.09 |
|---|---|
| HikariPool-1 - SQLSTATE(08S01), ErrorCode(-99999)로 인해 연결이 끊어진 것으로 표시됨 (0) | 2023.09.09 |
| PHP PDO 준비문 (0) | 2023.09.04 |
| CultureInfo로 문자열 형식 지정 (0) | 2023.09.04 |
| 노드 파일의 시작 부분에서 "/usr/bin/env node"는 정확히 무엇을 합니까? (0) | 2023.09.04 |