Develop Reference

How can I hide <tr> if it's <td> is empty

I have a table that gets data outputted to it dynamically based on data that is being pulled from my database. I have three hard coded <tr> but I want to hide them if there isn't any data outputted to their <td> from the database.
This is my HTML
<table class="table text-light text-end" id="data_table">
<thead>
<tr>
<th></th>
{{#each response4}}
<th class='title' scope="col">{{commodity}}</th>
{{/each}}
<th scope="col">Total</th>
</tr>
</thead>
<tbody class="text-end">
<tr>
<th scope="row">AUX</th>
{{#each response6}}
<td class="whole">{{fb_plus_fr}}</td>
{{/each}}
</tr>
<tr>
<th scope="row">UEM</th>
{{#each response4}}
<td class="whole">{{fb_plus_fr}}</td>
{{/each}}
</tr>
<tr>
<th scope="row">UT</th>
{{#each response5}}
<td class="whole">{{fb_plus_fr}}</td>
{{/each}}
</tr>
</tbody>
</table>
This is an example I pulled from the inspect tool when the page loads and gets data from the database. The first <tr> doesn't have any <td> and should be hidden.
<tbody class="text-end">
<tr>
<th scope="row">AUX</th>
</tr>
<tr>
<th scope="row">UEM</th>
<td class="whole">8215</td>
<td class="whole">5367</td>
<td class="whole">31193</td>
</tr>
<tr>
<th scope="row">UT</th>
<td class="whole">8215</td>
<td class="whole">5367</td>
<td class="whole">31193</td>
</tr>
</tbody>
This is how I'm attempting it but this doesn't work. It won't hide that first that doesn't have any data. Any advice on how to fix this is greatly appreciated!
window.onload = () => {
$("#data_table > tbody > tr ").each(function () {
if ($(this).find('td').is(":empty")){
$(this.hide())
}
})
};

This code may help you:
<tr th:if="${yourtable.empty}">
<td colspan="2">No Content Available</td>
</tr>

I think the easiest way to go about this would be to have an if block wrapped around the <tr> that checks if the data is empty before displaying the <tr>.

Copy data from selected rows of one table to another table using jQuery

I got 2 tables one of them has my products data such name,and bar-code.
The other one is empty and I want to copy products' table (selected rows only) into the second table via jQuery.
<table id="exampleTable1" style="max-width:50%;">
<thead>
<tr>
<th>bar-code</th>
<th>product name</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd selected">
<td class="sorting_1">545333456</td>
<td>Galaxy S9</td>
</tr>
<tr role="row" class="even selected">
<td class="sorting_1">876543</td>
<td>Galaxy S6</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">407654</td>
<td>SD 64G </td>
</tr>
<tr role="row" class="even selected">
<td class="sorting_1">876543</td>
<td>Galaxy S5</td>
<tr role="row" class="odd">
<td class="sorting_1">407654</td>
<td>Iphone 7 </td>
</tr>
</tbody>
</table>
My second table :
<table id="exampleTable2" style="max-width:50%;">
<thead>
<tr>
<th>bar-code</th>
<th>product name</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
<button class="btn btn-success" data-panelId="copy1" id="copy1">
Copy from exampleTable1 To exampleTable1
</button>

There are a few jQuery methods that make this easy to do, namely the .clone() and .each() method. You could achieve what you want by the following:
$('#copy1').click(function() {
$('tr.selected', '#exampleTable1').each(function() {
// For each "selected" row of table1 ..
var rowFromTable1 = $(this);
// .. Take a clone/copy of it ..
var clonedRowFromTable1 = rowFromTable1.clone();
// .. And append the cloned row to the tbody of table2
$('tbody', '#exampleTable2').append( clonedRowFromTable1 )
})
})

How to move a row that has data-search attributes to another table?

I am trying to move a selected row in my DataTable to another DataTable. I have this almost working but the problem is with the cells that have data-search attributes on them. That data just gets placed into my other table as [object Object]. I've tried finding an example on how to handle this case in the documentation but I'm not having any luck. Here is what I have..
https://jsfiddle.net/dmcgrew/x85o0mgL/5/
HTML..
<table id="selected_items">
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Crest Allowed</th>
<th> </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="select_items">
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Crest Allowed</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr id="1">
<td data-search="test">1</td>
<td>Testing Bowl</td>
<td data-search="nocrest">NO</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="test">32</td>
<td>Cup Test</td>
<td data-search="nocrest">NO</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="pristine">3335</td>
<td>Bowl Test</td>
<td data-search="nocrest">NO</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="pristine">120</td>
<td>Plate Test</td>
<td data-search="yescrest">YES</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="test">1000</td>
<td>Mug Test</td>
<td data-search="yescrest">YES</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="pristine">65</td>
<td>Ramekin Test</td>
<td data-search="yescrest">YES</td>
<td><button class="button select">Select</button></td>
</tr>
</tbody>
</table>
JS...
var select_items = $('.select_items').dataTable();
var selected_items = $('#selected_items').DataTable();
$('.select_items').on("click", "button.select", function(){
var selectedRow = select_items.api().row( $(this).parents("tr") ).data();
selected_items.row.add(selectedRow).draw(true);
});

Your basic problem is the data.
When a td has a data attribute (data-search), it is included in the data object so your data array looks like this:
[{display:"1", #data-search:"test"}, "Testing Bowl", {display: "NO", #data-search: "nocrest"}, "Select"] so first and third items in the array are, in fact objects, hence [object, object]
so the quickest (not the best in my mind) is to alter the data before you add it.
select_items.on("click", "button.select", function(){
var selectedRow = select_items.api().row( $(this).parents("tr") ).data();
console.log(selectedRow);
selectedRow[0] = selectedRow[0].display;
selectedRow[2] = selectedRow[2].display;
selected_items.row.add(selectedRow).draw(true);
});
https://jsfiddle.net/x85o0mgL/12/

playing sound onchange table content

I am trying to make a function which will play a sound when the value of a table field changes I tried it like this:
$(document).ready(function(){
$("#hor-zebra").change(function(){
document.getElementById('bflat').play()
});
});
Sorry I forgot my HTML:
<audio id="bflat" src="timbre.mp3"></audio>
<table id="hor-zebra" class="col-6" summary="">
<thead>
<tr>
<th scope="col">Ticket</th>
<th scope="col">Puesto</th>
</tr>
</thead>
<tbody>
<tr class="odd first">
<td class="first">A083</td>
<td class="first">MESA 1</td>
</tr>
<tr class="odd">
<td>B064</td>
<td>MESA 9</td>
</tr>
<tr>
<td>C028</td>
<td>MESA 5</td>
</tr>
</tbody>

How do you sort for row details in HTML?

I am using sorttable to sort my columns in table.
Now I have a table as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr class="row-details">
<td>{.salesOrderId}</td>
<td colspan="4">
<table class="sortable draggable">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{#math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
</tr>
{/items}
</tbody>
</table>
</td>
</tr>
{/orders}
</tbody>
</table>
Have you noted in the above mentioned table I have row details for each row?
Now when I click on a column header to sort it, I get the row details first and then I get all the main rows.
Here is how my table looks before sorting:
Here is how my table looks after sorting:
Is there any solution to this problem still using sorttable?
Update:
Here is sample jsFiddle
Row details are now sorted correctly as shown in the above jsFiddle. But now the problem is :
When you click on City column everything looks fine. Now if we again click on City Column, the row details are displayed before the actual rows which is wrong.
Please look at the images below for more information on problem:
After Clicking on City Column: (Which looks perfect)
After Clicking on City Column Again: (Expected for a developer but unexpected for a user)

I'am guessing but maybe the problem is the empty td beside the row details. I added first name as value and set css style display:none. Now the row details will be sorted also correctly.
Updated answer:
try to just nest the table inside the td like the below example.
Try this:
<table class="sortable">
<thead>
<tr>
<th>First Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishal</td>
<td> Sherathiya
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>67</td>
</tr>
</tbody>
</table>
<td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>80</td>
</tr>
<tr>
<td>M.E.</td>
<td>54</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Raj</td>
<td>Gosai</td>
</tr>
</tbody>
</table>