IE에서 에 행을 동적으로 추가 할 수 없습니까?

StackOverflow https://stackoverflow.com/questions/812693

문제

JSON 객체를 다운로드하고 데이터를 사용하여 HTML에 행을 추가하는 Ajax 응용 프로그램이 있습니다.u003Ctable> JavaScript dom 함수 사용. 인터넷 익스플로러를 제외하고는 완벽하게 작동합니다. 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>

다른 팁

분명히, 즉, 당신은 테이블 요소가 아닌 tbody 요소에 행을 추가해야합니다 ... 토론 참조 루비 포럼.

그곳에서 토론에 대한 확장u003Ctable> 마크 업은 일반적으로 명시 적으로 수행됩니다u003Cthead> 그리고u003Ctbody> 마크 업, 그러나u003Ctbody> 요소는 실제로 새 행을 추가 해야하는 곳입니다.u003Ctable> 포함되어 있지 않다u003Ctr> 요소 직접 요소.

편집 : 이제 IE에서 작동합니다! insertiblingnodesafter는 형제 자매의 부모 노드를 사용합니다.

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!");
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top