通过javascript创建表

Question

目前我正在通过HTML创建一个表格，如下所示： -

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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