표에 행을 삽입하십시오

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

문제

IE의 X 행을 테이블에 삽입하는 가장 일반적인 JavaScript 방법은 무엇입니까?

테이블 html은 다음과 같습니다.

<table><tbody id='tb'><tr><td>1</td><td>2</td></tr></tbody></table>

내가해야 할 일은 오래된 몸을 떨어 뜨리고 1000 줄의 새 몸을 삽입하는 것입니다. JavaScript 문자열 변수로 1000 행이 있습니다.

문제는 IE의 테이블에 내부 기능이 없다는 것입니다. 나는 그것을 할 수있는 많은 해킹을 보았지만 당신의 최선을보고 싶습니다.

참고 : jQuery 또는 다른 프레임 워크를 사용하는 것은 계산되지 않습니다.

도움이 되었습니까?

해결책

IE 's를 구현 한 사람의 훌륭한 기사는 다음과 같습니다. innerHTML= ~에 그가 어떻게해야했는지 tbody.innerHTML="<tr>...":

처음에는 IE가 InnerHTML로 수정 된 테이블에 대한 Redraw를 수행 할 수 없다고 생각했지만이 제한에 대한 책임이 있다는 것을 기억했습니다!

우연히 그가 사용하는 트릭은 기본적으로 모든 프레임 워크가 수행하는 방식입니다. table/tbody 집단.

편집하다: @mkoryak, 당신의 의견은 당신이 상상력이없고 대답을받을 자격이 없다고 말합니다. 하지만 어쨌든 당신을 유머 할 것입니다. 요점 :

> 그는 내가 필요한 것을 삽입하지 않습니다

WHA? 그는 (HTML 스트링으로서) 행을 삽입하고 있습니다. table 요소.

> 그는 또한 추가 숨겨진 요소를 사용합니다

그 요소의 요점은 모든 IE 요구가 "컨텍스트"라는 것을 설명하는 것이 었습니다. 대신 즉시 생성 된 요소를 사용할 수 있습니다 (document.createElement('div')).

> 또한 기사가 오래되었습니다

나는 다시는 당신을 돕지 않습니다;)

그러나 진지하게, 다른 사람들이 그것을 구현 한 방법을보고 싶다면 jQuery 소스를 살펴보십시오. jQuery.clean(), 또는 프로토 타입 Element._insertionTranslations.

다른 팁

jQuery가하는 것처럼, 예를 들어. 추가하다 <table> 그리고 </table> 그 주위에 문서에 삽입하고 원하는 노드를 원하는 위치로 이동하고 온도 요소를 버립니다.

코드는 다음과 같습니다.

    if($.support.scriptEval){
    //browser needs to support evaluating scripts as they are inserted into document
        var temp  = document.createElement('div');
    temp.innerHTML = "<table><tbody id='"+bodyId +"'>"+html;
    var tb = $body[0];
    tb.parentNode.replaceChild(temp.firstChild.firstChild, tb);
    temp = null;
    $body= $("#" + bodyId);
    } else {
    //this way manually evaluates each inserted script
        $body.html(html);
    }

미리 존재하는 것들 : 'bydid'의 신체가있는 몸체가있는 테이블. $ body는 글로벌 변수 (또는 함수가 폐쇄 된)이며, 즉, HTML에 삽입되는 스크립트를 평가하지 않기 때문에 약간의 jQuery도 있습니다.

나는 같은 문제를 겪었고 (많은 다른 사람들과 마찬가지로) 많은 일을 한 후에는 내가 일해야 할 일이 있습니다.

문서를 통해 TR을 만들어야합니다 .CreateElement ( 'tr')는 같은 방식으로 TD를 만들어야합니다. tr에 td를 부여하고, tr to t body (테이블이 아님)를 부여하면 당신은 당신이 만든 td를 내부 할 수 있으며 작동합니다. 이것은 내가 사용했던 ie8입니다. 기본적으로 테이블 구조는 CreateElement를 사용하여 만들어야하지만 나머지는 내부에 적합 할 수 있습니다. 나는 IE8 디버거 에서이 시청을하고 있었고 그것을 추가 할 것이라고 말할 것입니다 (내가 tr.innerhtml = "blah"를했다면) 오류가 표시되지 않지만 표시되지 않을 것입니다. 테이블 (TD는 나타나지 않았지만 /td는 그랬습니다)

따라서 마침내 CreateElement 호출로 TR과 TD를했을 때 올바른 모습을 만들었고 페이지를 올바르게 그렸습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top