通过javascript创建表

Question

目前我正在通过 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>

目前我正在通过 HTML 创建所有内容。我有 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