創建表通過javascript

Question

目前，我通過HTML創建一個表如下： - 通過HTML

<table class="table table-hover table-responsive">
 
 
    <thead>
 
 
     <tr>
 
 
      <th></th><th>Chamber</th>
 <th>Commitee ID</th>
 <th>Name</th>
 <th>Parent Committee</th>
 <th>Contact</th><th>Office</th>
 
 
     </tr>
 
 
    </thead>
 
 
    <tbody>

 
 
     <tr dir-paginate="user in committee_house|filter:search|itemsPerPage:10" pagination-id="committee_house">
 
 
      <td> 
 
       <div id="favourite_star"> 
 
        <i class="fa fa-star-o fa-2x favourite_icon" onclick="storeLocally()"></i> 
 
       </div> 
 
      </td> 
 
      <td>{{user.committee_chamber}}</td>
 
 
      <td>{{user.committee_id}}</td>
 
 
      <td>{{user.committee_name}}</td>
 
 
      <td>{{user.committee_parent_id}}</td>
 
 
      <td>{{user.committee_contact}}</td>
 
 
      <td>{{user.committee_office}}</td>
 
 
     </tr>
 
 
    </tbody>
 
 
</table>
 
 
<div id="controls" class="controls" align="center"> 
 
    <dir-pagination-controls pagination-id="committee_house" max-size="5" direction-links="true" boundary-links="true" > 
 
    </dir-pagination-controls> 
 
</div>

目前我創造的一切。我有dirPagination，搜索排序，並使用範圍變量來存儲在JavaScript中的值。我想將此代碼完全移至JavaScript，因爲我將需要再次創建此表，因此我想創建一個函數。這裏的committee_house是範圍變量。如何在不破壞任何功能的情況下在JavaScript中完成這件事。

我試圖把整個事情放在一個變量中，並將該標記的innerHTML設置爲該變量，但它沒有解決。

感謝您提供任何幫助。

Answer 1

Angular方法並不像設置innerHTML值那樣做。您可以使用UI路由器到模板視圖（給定的HTML像上面）

下面的代碼假定你有一個模板加載到MyTemplate的

// create a module 
export default angular.module(name, [ 
    angularMeteor 
    ,uiRouter 
    ,Amba 
]).component(name, { 
    template: myTemplate, 
    controller: Diags 
}) 
    .config(config) 
    .run(run); 

你也可以使用templateUrl，如果你想保持模板一個單獨的文件

Answer 2

function tableCreate(){ 
 
    var body = document.body, 
 
     tbl = document.createElement('table'); 
 
    tbl.style.width = '100px'; 
 
    tbl.style.border = '1px solid black'; 
 

 
    for(var i = 0; i < 3; i++){ 
 
     var tr = tbl.insertRow(); 
 
     for(var j = 0; j < 2; j++){ 
 
      if(i == 2 && j == 1){ 
 
       break; 
 
      } else { 
 
       var td = tr.insertCell(); 
 
       td.appendChild(document.createTextNode('Cell')); 
 
       td.style.border = '1px solid black'; 
 
       if(i == 1 && j == 1){ 
 
        td.setAttribute('rowSpan', '2'); 
 
       } 
 
      } 
 
     } 
 
    } 
 
    body.appendChild(tbl); 
 
} 
 
tableCreate();

或

function tableCreate() { 
 
    var body = document.getElementsByTagName('body')[0]; 
 
    var tbl = document.createElement('table'); 
 
    tbl.style.width = '100%'; 
 
    tbl.setAttribute('border', '1'); 
 
    var tbdy = document.createElement('tbody'); 
 
    for (var i = 0; i < 3; i++) { 
 
     var tr = document.createElement('tr'); 
 
     for (var j = 0; j < 2; j++) { 
 
      if (i == 2 && j == 1) { 
 
       break 
 
      } else { 
 
       var td = document.createElement('td'); 
 
       td.appendChild(document.createTextNode('\u0020')) 
 
       i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null; 
 
       tr.appendChild(td) 
 
      } 
 
     } 
 
     tbdy.appendChild(tr); 
 
    } 
 
    tbl.appendChild(tbdy); 
 
    body.appendChild(tbl) 
 
}

鏈接： - Create table using Javascript