자바 스크립트에서 테이블을 만들 때 Sorttable.js (자바 스크립트 테이블 정렬)가 작동하지 않습니다.

Question

sorttable.js 패키지를 사용하여 열 헤더를 클릭 할 때 정렬 가능한 HTML 테이블을 만들려고합니다. 나는 테이블이 HTML에 정적으로 선언하면이 잘 작동하도록 할 수 있습니다 더 이상 내가 자바 스크립트로 테이블을 만들 때

fiddle 그러나

<table class="sortable" style="width:100%"> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    <th>Points</th> 
    </tr> 
    <tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
    </tr> 
    <tr> 
    <td>Joe</td> 
    <td>Smith</td> 
    <td>50</td> 
    </tr> 
    <tr> 
    <td>Abraham</td> 
    <td>Jones</td> 
    <td>4</td> 
    </tr> 
</table> 

, 정렬 기능이 아니며, 나는 콘솔에 오류 메시지를 얻을 :

fiddle

tbl_array = new Array() 
    tbl_array = [["Firstname","Lastname","Points"], ["Eve","Jackson","94"], ["Joe","Smith","50"], ["Abraham","Jones","4"]] 
    var body = document.body, 
     tbl = document.getElementById('summaryTable'); 

    // clear all rows on the table 
    while(tbl.rows.length > 0){ 
     tbl.deleteRow(0) 
    } 
    tbl.style.width = '100px'; 
    tbl.style.border = '1px solid black'; 

    numRows = tbl_array.length 
    numCols = tbl_array[0].length 

    // insert each 2D array entry into a table cell 
    for(var i = 0; i < numRows; i++){ 

    // insert header 
    if (i == 0){ 
     var header = tbl.createTBody(); 
     var row = header.insertRow(); 
      for (var j=0; j < numCols; ++j){ 
      var cell = document.createElement('th') 
      cell.appendChild(document.createTextNode(tbl_array[i][j])); 
      cell.style.border='1px solid black'; 
      cell.style.fontWeight = "bold"; 
      row.appendChild(cell) 
      } 
    } 

    else{ 
     var tr = tbl.insertRow(); 
     for(var j = 0; j < numCols; j++){ 
      var td = tr.insertCell(); 
      td.appendChild(document.createTextNode(tbl_array[i][j])); 
      td.style.border = '1px solid black'; 
     } 
    } 
    } 
    console.log("tbl", tbl) 

내가 생각할 수있는 유일한 것은 내가 아니에요이다 자바 스크립트 제대로 표를 포맷,하지만 난 콘솔에 두 테이블을 인쇄하고 그 구조를 검토 할 때, 그들은 기본적으로 동일하다 :

<table ...> 
    <tbody> 
     <tr ...> 
      <th>..</th> 
      <th>..</th> 
     </tr> 
     <tr> 
      <td>..</td> 
      <td>..</td> 
     </tr> 
    </tbody> 
</table> 

내가 자바 스크립트로 테이블을 만드는거야 방법에 내 오류인가? 어떤 도움을 주시면 감사하겠습니다. 감사!

Answer 1

sorttable.js 모든 테이블이 초기화 될 때 이미 HTML에 있다고 가정합니다. 테이블이 동적으로 생성되므로 수동으로 makeSortable 메소드를 부트 스트랩해야합니다. 당신의 console.log 전에

마우스 오른쪽을보십시오이 삽입 : 첫 번째

sorttable.makeSortable(document.getElementById('summaryTable'));