create table via javascript

Question

Currently I am creating a table through HTML as follows:-

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

Currently I am creating everything through HTML. I have dirPagination, search sort and am using a scope variable to store the values in javascript. I want to move this code fully to javascript as I will be needing to create this table again so I want to create a function. Here committee_house is the scope variable. How to do this whole thing in javascript without breaking any functionality.

I tried to put the whole thing in a variable and set the innerHTML of that tag to the variable but it did not work out.

Thanks for any help provided.

score 0 · Answer 1 · answered Oct 30 '16 at 02:55

The Angular way is NOT to do things like set the innerHTML value. You can use UI router to template a view (given HTML like above)

The code below assumes you have a template loaded into myTemplate

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

you can also use templateUrl if you want to keep the template in a separate file

score 0 · Answer 2 · edited May 23 '17 at 12:00

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();

or

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

Link:-Create table using Javascript

But what about the pagination and the pagination controls. Where do I have to put them? — Zxxxxx, Oct 30 '16 at 02:58

create table via javascript

2 Answers2