Merging two html table in jquery - javascript

I want to merge two html table in jquery.I want to merge the table tbl1 and tbl2 and recreate a table joined.I just want to copy the tag not to cut the tag.need to have 3 tables
I have tried as
$('button').click(function(){
$('#tbl2 thead tr').find('th').insertAfter('#joined thead tr');
$('#tbl1 thead tr').find('th').insertAfter('#joined thead tr');
$('#tbl2 tbody tr').wrap('#joined tbody tr');
$('#tbl1 tbody tr').wrap('#joined tbody tr');
});
#joined{background:#ff0;margin-bottom:10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>click</button>
<table id="joined"><thead><tr></tr><thead>
<tbody><tr></tr><tbody>
</table>
<table id="tbl1">
<thead style="background-color: #00f; color: #fff">
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proposal Submitted</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>
<table id="tbl2">
<thead style="background-color: #00f; color: #fff">
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEst</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>TEst</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>TEst Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>
I need the html table as
<table id="joined">
<thead >
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
<th></th> <!-- empty cell -->
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proposal Submitted</td>
<td>4</td>
<td>1595050</td>
<td></td> <!-- empty cell -->
<td>TEst</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>14</td>
<td>4573200</td>
<td></td> <!-- empty cell -->
<td>TEst</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>6</td>
<td>1193328</td>
<td></td> <!-- empty cell -->
<td>TEst Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>

Related

Nested table with data tables

I have the following nested HTML table. I am using the Datatables API to make my tables searchable. One problem I have faced is with the nested tables I'm not sure how to make the nested tables searchable? I have tried adding additional ID tags to the nested tables HTML code and adding that into the dataTables JS code call but that did not work. Any idea how to make the sub-tables searchable?
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
<div class="container">
<table id="example" class="table table-striped">
<thead>
<tr>
<th>Image</th>
<th>Date</th>
<th>TC NAME</th>
<th>NS FLOW</th>
<th>SN FLOW</th>
<th>NS FLOW</th>
<th>SN FLOW</th>
<th>NS FLOW</th>
<th>SN FLOW</th>
</tr>
</thead>
<tbody>
<tr>
<td>721</td>
<td>3/15/20</td>
<td>
<table id="example1" class="table table-nostriped">
<tr>
<td>TC1</td>
</tr>
<tr>
<td>TC2</td>
</tr>
<tr>
<td>TC3</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>800</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>722</td>
<td>3/16/20</td>
<td>
<table class="table table-nostriped">
<tr>
<td>TC1</td>
</tr>
<tr>
<td>TC2</td>
</tr>
<tr>
<td>TC3</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>800</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>633</td>
<td>3/17/20</td>
<td>
<table class="table table-nostriped">
<tr>
<td>TC1</td>
</tr>
<tr>
<td>TC2</td>
</tr>
<tr>
<td>TC3</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>300</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>800</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>

If you by "searchable" mean DataTables inside DataTables you can use the createdRow callback to initialize tables inside a <tr>'s columns.
You must have a columns section in order to compensate for the missing <thead> in the nested tables (avoiding the TypeError: col is undefined error) :
const columns = [
{ title: '' },
]
Init the nested tables in the createdRow callback:
let table = $('#example').DataTable({
createdRow: function(row) {
$(row).find('td table')
.DataTable({
columns: columns,
dom: 'tf'
})
}
})
Notice the dom section. Here only showing the table itself and the filter box. You
can remove the header with
table.dataTable td table thead {
display: none;
}
Dont add this CSS if you want sortable columns in the nested tables.
demo using the markup in question -> http://jsfiddle.net/davidkonrad/8pzkr6yn/
Update. If your concern just is to be able to search within the content of the nested tables (e.g the HTML markup scraped away) just define the relevant columns type as 'html' (https://datatables.net/reference/option/columns.type) :
let table = $('#example').DataTable({
columnDefs: [
{ targets: [2,3,4,5,6,7], type: 'html' },
],
...
})

Fix table head while scrolling tbody and thead column aligned to tbody column

Here is table with fixed outer height, and i need when scroll start, thead will be fixed and tbody will be scroll that show heading of each column.Is there any idea to fix heading of table on top and inner content of table will be scroll.
.max_height{max-height:100px;overflow:auto;}
<div class="max_height">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr> <tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

Check this with updated css
.max_height{margin:0px;max-width:450px;}
table thead,table tbody{
display:block;
}
table tbody{
max-height:100px;
overflow:auto;
}
table tr{
display:table;
width:100%;
table-layout:fixed;
}
<div class="max_height">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr> <tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

How to hide the specific tr:nth-child(6) based on the content of a tr:nth-child(7) > td:nth-child(2)

I would like to hide with javascript a specific child :
#table-detail > tbody > tr:nth-child(10)
based on the content of another specific preceding child :
#table-detail > tbody > tr:nth-child(7) > td:nth-child(2)
I can hide the child as followed :
$('#table-detail > tbody > tr:nth-child(10)').css('display', 'none');
but I have no clue how to check the content of the preceding child (if child element
#table-detail > tbody > tr:nth-child(7) > td:nth-child(2)" content == 'Tarte-fine
then hide child element X.
Please find hereafter the table :
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td> <-CONTENT TO CHECK IN THIS CHILD ELEMENT
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr> <- CHILD ELEMENT TO HIDE
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>

You need to use :contains() selector that select element has special text content.
$('#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains("Tarte-fine")').css('display', 'none');
Also you can simplify the code and use :eq() selector instead of :nth-child
$('#table-detail tr:eq(6) td:eq(1):contains("Tarte-fine")').css('display', 'none');
$('#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains("Tarte-fine")').css('color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td> <!-- CONTENT TO CHECK IN THIS CHILD ELEMENT -->
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr> <!-- CHILD ELEMENT TO HIDE -->
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>
</table>
Note that :contain() return unwanted result in some case, so you can use .filter() instead
$('#table-detail tr:eq(6) td:eq(1)').filter(function(){
return $(this).text() == "Tarte-fine";
}).css('display', 'none');

You could check if that cell contains the specific text using :contains and hide that other cell using hide():
$(function() {
var found = $("#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains(Tarte-fine)").length > 0;
if (found) {
$("#table-detail > tbody > tr:nth-child(10)").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td>
<!-- CONTENT TO CHECK IN THIS CHILD ELEMENT -->
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr>
<!-- CHILD ELEMENT TO HIDE -->
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>
</table>

As an alternative this is the code to do what you need without using jquery.
This is by the way a more solid solution since you don't need to know the numerical order of both of the rows that contain the cell you want to check and the cell you want to hide.
const rows = document.getElementsByTagName('tr');
let textToCheck = 'Tarte-fine';
let childTextOfTheElementToHide = 'Taille (cm)';
let check = Object.keys(rows).filter(key => {
return rows[key].children[1].innerHTML === textToCheck
});
if(check.length > 0){
let hide = Object.keys(rows).filter(key => {
return rows[key].children[0].innerHTML === childTextOfTheElementToHide
});
rows[hide].style.display = 'none';
}

jQuery table add class for the first matching tbody and add class for last matching tbody

I have my markup like this
<table class="section-table">
<thead class="found">
<tr>
<th>data 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody class="found">
<tr>
<td>data test</td>
</tr>
</tbody class="found">
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<thead>
<tr>
<th>data 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<thead class="found">
<tr>
<th>data 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody class="found">
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody class="found">
<tr>
<td>data test</td>
</tr>
</tbody>
</table>
Now here you can see that in some thead there is class called found. Here in the tbody there is also some tbody has class found. Now I want in jQuery after the thead which has class found it will get the next first tbody which has class found tbody and add class first-row and the last tbody which has class found will be last-row. So basically the out put should be like
<table class="section-table">
<thead class="found">
<tr>
<th>data 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody class="found first-row">
<tr>
<td>data test</td>
</tr>
</tbody class="found last-row">
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<thead>
<tr>
<th>data 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<thead class="found">
<tr>
<th>data 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody class="found first-row">
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody class="found last-row">
<tr>
<td>data test</td>
</tr>
</tbody>
</table>
I have tried this
jQuery('table.section-table').find('thead.found').each(function() {
jQuery(this).next('tbody.found').addClass('first-row');
jQuery(this).prev('tbody.found').addClass('last-row');
});

You have invalid html (a <table> can have multiple <tbody> elements, but only have one <thead> element. Because of that, you will not be able to use normal selectors such as
('tbody').siblings('tbody').first().addClass('first-row')
Instead you will need to loop each element to in the <table>
var foundFirst = false;
$('table').children('.found').each(function(index, item){
if ($(this).is('thead')) {
foundFirst = false; // reset for next set of tbody elements
} else {
if (!foundFirst) {
$(this).addClass('first-row')
foundFirst = true; // toggle
} else {
$(this).addClass('last-row')
}
}
})
Note the above assumes there will not be more that two <tbody class="found"> in the group following a <thead> element

just do this :
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).next().find('tbody.found:first').addClass('first-row');
jQuery(this).next().find('tbody.found:last').addClass('last-row');
});

How to prevent clicking on header column

How to prevent click event in a header column.
HTML:
<table>
<tr>
<th class="column">Header</th>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>
And my script
$('.column:not("th")').on('click', function(){
alert("test");
});

Why not:
$('td.column').on('click', function(){
alert("test");
});

Add tbody selector on you code
$('tbody .column').on('click', function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="column">thead</th>
</tr>
<tr>
<th class="column">thead Body 1</th>
</tr>
<tr>
<th class="column">thead Body 2</th>
</tr>
<tr>
<th class="column">thead Body 3</th>
</tr>
</thead>
<tr>
<td class="column">Header</td>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>

Categories