생성된 테이블에 주어진 데이터를 동적으로 추가(소스코드)-HTML 튜토리얼-php.cn

아이디어:

집

웹 프론트엔드

HTML 튜토리얼

생성된 테이블에 주어진 데이터를 동적으로 추가(소스코드)

云罗郡主

Oct 18, 2018 pm 02:12 PM

데이터 역학

이 기사에서는 생성된 테이블(소스 코드)에 특정 데이터를 동적으로 추가하는 방법에 대해 설명합니다. 필요한 친구가 이를 참조할 수 있기를 바랍니다.

아이디어:

테이블 + thead + tbody 만들기
tr + th
각 행에 대해 tr + td 만들기
페이지에 추가

참고: 최종적으로 페이지에 추가되는 이유는 페이지에 요소가 추가될 때마다 페이지가 새로 고쳐지기 때문에 먼저 메모리에 테이블이 생성된 후 페이지에 한꺼번에 추가되기 때문입니다. 한 번만 새로 고쳐야 하므로 성능 손실이 줄어듭니다.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body></body><script>
    var data = [
        { name : "jim1", age : 18, gender : "male"},
        { name : "jim2", age : 19, gender : "female"},
        { name : "jim3", age : 20, gender : "female"},
        { name : "jim4", age : 21, gender : "male"}
    ];    function createElement( tag ) {
        return document.createElement( tag );
    }    var table = createElement( "table" );    var thead = createElement( "thead" );    var tbody = createElement( "tbody" );
    table.appendChild( thead );
    table.appendChild( tbody );    var trhead = createElement( "tr" );
    thead.appendChild( trhead );    for ( var k in data[ 0 ] ){
        th = createElement( "th" );
        th.appendChild( document.createTextNode( k ) );
        trhead.appendChild( th );
    }    for ( var i = 0; i < data.length; i++){        var tr = createElement( "tr" );        for ( var j in data[ i ]){
            td = createElement( "td" );
            td.appendChild( document.createTextNode( data[i][j] ));
            tr.appendChild( td );
        }
        tbody.appendChild( tr );
    }  //table.setAttribute("border","1px");
  //或直接设置table.border = "1px";两者等价。
    table.border = "1px";
    table.cellspadding = 0;
    table.setAttribute("align","center");
    table.style.textAlign = "center";
    table.setAttribute("borderColor","skyBlue");
    table.setAttribute("cellspacing",0);
    document.body.appendChild( table );</script></html>

로그인 후 복사

위는 생성된 테이블(소스 코드)에 주어진 데이터를 동적으로 추가하는 방법에 대한 전체 소개입니다. 자세한 내용은 PHP 중국어 웹사이트를 참조하시기 바랍니다.

위 내용은 생성된 테이블에 주어진 데이터를 동적으로 추가(소스코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.