append table to another div | JS jQuery

Question

I have 2 div in HTML

The first div for the folder column.

<div class="columnFolder-container"></div>

The second div for the column table. with class ._zTable

<div class = "_zTable"> </ div>

Then in javascript, I have 1 variable (var div =) which includes 1 div (class="folder") inside the div contains the table with id="exTable".

I want the table to be moved into ._zTable and not in the div class .folder.

Because I want the div .folder in the column folder.

    var div = '<div class="folder"><span class="fname">Folder : '+name+'</span' +
              '<table id="exTable' + currentFolderIndex + '" class="table table-bordered" cellspacing="0">' +
             '<thead>' +
                '<tr>' +
                  '<th style="border-color:rgb(221, 221, 221);"><input name="select_all" value="1" id="selectAll" type="checkbox" /></th>' +
                  '<th>Name</th>' +
                  '<th>Type</th>' +
                  '<th>Size</th>' +
                  '<th>Date Created</th>' +
                '</tr>' +
            '</thead>' +
            '</table>' +
            '</div>';

Please explain your problem properly.. what exactly you want to achieve? — test_124
– test_124, Commented Nov 8, 2017 at 10:32

Bijan Rafraf · Accepted Answer · 2017-11-08 10:38:03Z

1

You will need to split your variable into two.

I notice your table is inside your .folder div. I presume that shouldn't be the case.

The variables are then:

var div = '<div class="folder"><span class="fname">Folder : '+name+'</span></div>'
var table = '<table id="exTable' + currentFolderIndex + '" class="table table-bordered" cellspacing="0">' +
         '<thead>' +
            '<tr>' +
              '<th style="border-color:rgb(221, 221, 221);"><input name="select_all" value="1" id="selectAll" type="checkbox" /></th>' +
              '<th>Name</th>' +
              '<th>Type</th>' +
              '<th>Size</th>' +
              '<th>Date Created</th>' +
            '</tr>' +
        '</thead>' +
        '</table>';

Then the code to put these in the right divs is:

document.getElementsByClassName("columnFolder-container")[0].innerHTML=div;
document.getElementsByClassName("_zTable")[0].innerHTML=table;

or with jquery:

$('.columnFolder-container').first().html(div);
$('._zTable').first().html(table);

answered Nov 8, 2017 at 10:38

Bijan Rafraf

3811 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Calvin Ananda Over a year ago

Can it be like this? $('._zTable').append(table); $("#folder" + currentFolderIndex).DataTable({});

Bijan Rafraf Over a year ago

It could. It just depends what behaviour you want when it is clicked the second time. With .html we would replace the table every time and with .append we would add more tables. One thing to watch out for is that if you append like that then your headers will list below each other then your tables like this: Header 1 Header 2 Table1 Table2

Calvin Ananda Over a year ago

it's work. I answered it myself, Lol. but thanks for suggesting two variables.

Amit Bhagat Over a year ago

If you want to wrap in div._ztable

Calvin Ananda Over a year ago

can you explain what the 'wrap' is for?

Sujoy Mitra · Accepted Answer · 2017-11-09 05:53:55Z

1

Using Jquery :

`$(document).ready(function() {
   $('#exTable').appendTo('.columnFolder-container');
});`

answered Nov 9, 2017 at 5:53

Sujoy Mitra

305 bronze badges

3 Comments

Calvin Ananda Over a year ago

.columnFolder-container is for Folder Column, not Table.

Sujoy Mitra Over a year ago

$('#exTable').appendTo('._zTable');

Calvin Ananda Over a year ago

Sorry, This question has been answered

Collectives™ on Stack Overflow

append table to another div | JS jQuery

2 Answers 2

5 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Related