자바 스크립트

Question

을 사용하여 테이블의 행과 열을 추가하려면 어떻게해야 만드는 프로젝트에서 생성 된 다음 표 Dojo 툴킷의 사용 :

<div id="table" class="crudTable"> 
    <div class="crudContainer"> 
    <div class="crudHeaderColumn crudColumn"> 
     <div class="crudRow crudHeader">A</div> 
     <div class="crudRow crudHeader">B</div> 
     <div class="crudRow crudHeader">C</div> 
    </div> 

    <div class="crudColumn"> 
     <div class="crudRow">1</div> 
     <div class="crudRow">3</div> 
     <div class="crudRow">3</div> 
    </div> 

    <div class="crudColumn"> 
     <div class="crudRow">4</div> 
     <div class="crudRow">5</div> 
     <div class="crudRow">6</div> 
    </div> 
    </div> 
</div> 

그것은 기본적으로의 첫 번째 열에 같은 헤더 세로 테이블 (및 모든 항목이 다른 열임). 데이터베이스 항목에 속성 A, B, C 및 D의 값이 있지만 테이블에서 처음에는 A, B, C 속성 만 뷰에 렌더링한다고 가정합니다.

테이블을 생성 한 후 새로운 테이블 헤더 (새로운 crudRow crudHeader)를 추가하여 D를 추가하고 결과적으로 모든 항목에 대해 새 셀을 추가하여 D 값을 표시하려고합니다.

어떻게하면됩니까?

Answer 1

우선 appendChild() 방법을 사용하여 div 헤더에 새로운 child을 삽입해야합니다.

다음 단계는 iterate 모두 crudColumn 요소이며 각 crudColumn에 대해 새 div을 추가합니다.

다음은 예입니다.

는

var button=document.getElementById('change'); 
 
var table=document.querySelector('#table .crudContainer'); 
 
button.onclick=function(){ 
 
    var header=document.querySelector('#table .crudHeaderColumn'); 
 
    var newDiv=document.createElement('div'); 
 
    newDiv.innerHTML="D"; 
 
    header.appendChild(newDiv); 
 
    
 
    var rows=document.querySelectorAll('#table .crudContainer .crudColumn'); 
 
    for(var i=1;i<rows.length;i++){ 
 
     var row=rows[i]; 
 
     var newDiv=document.createElement('div'); 
 
     newDiv.innerHTML="new cell"; 
 
     row.appendChild(newDiv); 
 
    } 
 
}

.crudColumn div{ 
 
    float:left; 
 
}

<div id="table" class="crudTable"> 
 
    <div class="crudContainer"> 
 
    <div class="crudHeaderColumn crudColumn"> 
 
     <div class="crudRow crudHeader">A</div> 
 
     <div class="crudRow crudHeader">B</div> 
 
     <div class="crudRow crudHeader">C</div> 
 
    </div> 
 
    <br> 
 
    <div class="crudColumn"> 
 
     <div class="crudRow">1</div> 
 
     <div class="crudRow">3</div> 
 
     <div class="crudRow">3</div> 
 
    </div> 
 
    <br> 
 
    <div class="crudColumn"> 
 
     <div class="crudRow">4</div> 
 
     <div class="crudRow">5</div> 
 
     <div class="crudRow">6</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br> 
 
<button id="change">Change</button>