CODEWITHSUNDEEP
javascriptjqueryhtmlcsv
Sergiodiaz53
Sergiodiaz53

Reputation: 1288

Merge 2 tables with jQuery

I'm trying to merge two tables in one new with jQuery this way: 

var table = document.createElement("table");

table.id = "mergedTable";

$("#mergedTable > tbody:last")
    .append($("#csvInfoTable2 > tbody").html())
    .append($("#csvInfoTable > tbody").html());

The problem is that I'm calling a HTML to CSV function and it says that mergedTable is empty. Also if I do console.log(table) it shows it empty. The tables have different numbers of columns but I need to generate something like:

col1,col2,col3 
col1,col2,col3 --> end table1
col1,col2,col3,col4 --> table2
col1,col2,col3,col4.

I'm using: https://github.com/DrPaulBrewer/html5csv to generate the file and it works with csvInfoTable and csvInfoTable2 if I do separated.

Thanks

Upvotes: 0

Views: 1290

Answers (2)

real_yggdrasil
real_yggdrasil

Reputation: 1263

For whom it may concern. I needed to merge two tables. The first was an asp.net Gridview, that is only at runtime an html table, and one htmltable i create dynamically. The javascript below is how i merge the two and make the latter table invisible by hiding the it is in.

  <script type="text/javascript" language="javascript">
     // dit script plakt de rows van de ene tabel aan die van de tweede. 
     function AlignHeaders() {
         $("#tblHeader > tbody:last")
     .append($("#gvKlantInfo > tbody").html());
     }

     $('.divDatagrid').hide(); //this hides the second grid

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59272

You're not appending the newly created table. So $("#mergedTable > tbody:last") will fail.

And you should be using jQuery to create table, although you can do it in your way, but make sure you append it.

$('<table />', { id : "mergedTable" }).appendTo('body');

Note: If you want what @charlietfl suggests, then with your code, you would do

var tab = $(table).filter('> tbody:last')
    .append($("#csvInfoTable2 > tbody").html())
    .append($("#csvInfoTable > tbody").html());

Upvotes: 1

Related Questions