CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Calvin Ananda
Calvin Ananda

Reputation: 1530

append table to another div | JS jQuery

JSFiddle Here

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

Upvotes: 0

Views: 165

Answers (2)

Sujoy Mitra
Sujoy Mitra

Reputation: 30

Using Jquery : 

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

Upvotes: 1

Bijan Rafraf
Bijan Rafraf

Reputation: 385

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

Upvotes: 1

Related Questions