Develop Reference

Dynamically added table data and table rows have zero height

I am using angular.element to dynamically inject table data into my table. Onload my table already has data, when I double click on the content it hides the old tbody and shows the new tbody where the dynamic data needs to be added and this tbody contains a form as well to send the edited data.
here's the html:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td class="text-center"><b>Code</b></td>
<td class="text-center"><b>Particulars</b></td>
<td class="text-center"><b>Amount(Rs. in lakh)</b></td>
</tr>
</thead>
<tbody ng-if="loading == false && iseditstmt == false">
<tr ng-repeat="b in blsheetinfo">
<td class="text-left"><b>{{b.key}}</b></td>
<td class="text-left">{{b.particular}}</td>
<td class="text-right" ng-dblclick="editstmt();editRec(blsheetinfo,'edit','stmtupdate');">{{b.amt}}</td>
</tr>
<tr ng-if="blsheetinfo == null">
<td class="text-center" colspan="3">No data found.</td>
</tr>
</tbody>
<tbody ng-if="iseditstmt == true">
<form role="form" ng-submit="updatestmt(data)" name="updatedata" id="updatedata" >
</form>
</tbody>
<tr ng-if="loading == 1"><td class="text-center" colspan="3">Loading...</td></tr>
</table>
This is the js code:
var HTMLcontent = "";
angular.forEach($scope.blsheetinfo, function (d) {
HTMLcontent += `<tr class="form-group">
<td class="text-left " ng-model="frmdata.key" name="key" id="key" ><b> `+d.key+`</b></td>
<td class="text-left" ng-model="frmdata.particular" name="particular" id="particular" >`+d.particular+`</td>
<td class="text-right" ng-model="frmdata.amt" name="amt" id="amt" ><input class="form-control" type="text">`+d.amt+`</td>
</tr>`
});
setTimeout(function(
)
{
// angular.element("#updatedata").html(HTMLcontent);
// tried both of these options
angular.element("#updatedata").append(HTMLcontent);
},2000);
The problems that I am facing are that it looks like my data is being added to the DOM but i am not able to see it. The tbody element has height set to 0

Delete row from table using button - Bootstrap Table

I'm trying the row to be deleted when I click the delete icon in the table using bootstrap table.
My table:
<table id="checkDataTable">
<thead style="color: #31708f; background-color: #d9edf7 ">
<tr>
<th data-field="AssetReference">Referans</th>
<th data-field="Customer">Müsteri</th>
<th data-field="ReceiverCompanyName">Alici Firma</th>
<th data-field="Tools" data-formatter="StatuFormatter">Islem</th>
</tr>
</thead>
</table>
Javascript:
function StatuFormatter(value, row, index) {
return "<a onclick='removeAssetEconomyCheckBillOfLadingRow()'><i class='fa fa-trash fa-2x' aria-hidden='true'></i></a>";
}
function removeAssetEconomyCheckBillOfLadingRow(id) {
alert(id);
}
It's fine until the removeAssetEconomyCheckBillOfLadingRow function.
How can I delete inside this function?

Please try below:
$(document).on('click', 'button.deleteRow', function(event) {
$(this).closest("tr").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="checkDataTable" class="table">
<thead style="color: #31708f; background-color: #d9edf7 ">
<tr>
<th data-field="AssetReference">Referans</th>
<th data-field="Customer">Müşteri</th>
<th data-field="ReceiverCompanyName">Alıcı Firma</th>
<th data-field="Tools" data-formatter="StatuFormatter">İşlem</th>
</tr>
</thead>
<tobdy>
<tr>
<td>Data1</td>
<td>Data1</td>
<td>Data1</td>
<td><button type="button" class="deleteRow">
Delete
</button></td>
</tr>
<tr>
<td>Data2</td>
<td>Data2</td>
<td>Data2</td>
<td><button type="button" class="deleteRow">
Delete
</button></td>
</tr>
<tr>
<td>Data3</td>
<td>Data3</td>
<td>Data3</td>
<td><button type="button" class="deleteRow">
Delete
</button></td>
</tr>
</tobdy>
</table>

First of all, you need to set id to to identify the deleting row.
<tr id="1"></tr>
And get tr and remove
function removeAssetEconomyCheckBillOfLadingRow(id) {
$('#checkDataTable').row($('#{{id}}'))).remove().draw();
}

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

jQuery search toggled table rows

I've a table with rows that I can toggle. Now I wanna search in the table. My search function work's but does not display the hidden rows. How can I do this? Here my search function.
$(document).ready(function(){
$("#search").keyup(function(){
var search = $(this).val();
$("table tbody tr").hide();
$(".header-1").show();
$(".header-2").show();
$("table tbody tr td:contains("+search+")").each(function(){
$(this).closest("tr").show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="skills" id="skills" width="100%" cellspacing="0">
<tr class="header-1">
<th>Skill</th>
<th colspan="2">Theoretische Kenntnisse</th>
<th>Praktische Kenntnisse</th>
<th class="skills_pfl">Zuletzt gepfelgt</th>
</tr>
<tr class="header-2">
<th></th>
<th class="skills_ausb">Ausgebildet</th>
<th class="skills_ausb_jhr">Ausbildungsjahr</th>
<th></th>
<th></th>
</tr>
<tr id="74" class="skills_kat">
<td style="text-align: left;" class="show"
onclick="$('#body-74').toggle(300); $('#fa-74').toggleClass('fa-caret-right').toggleClass('fa-caret-down');">
<i class="fa fa-caret-right" id="fa-74"></i> Anwendungsgebiete
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tbody id="body-74" class="table-body"></tbody>
<tr id="116" class="skills_kat">
<td style="text-align: left;" class="show"
onclick="$('#body-116').toggle(300); $('#fa-116').toggleClass('fa-caret-right').toggleClass('fa-caret-down');">
<i class="fa fa-caret-right" id="fa-116"></i> Application Server
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Some peoples don't understandt me. The search logic works fine, but I've rows that I can toggle with a click. And these rows won't be display if i search the table. Here a screenshot.

Why don't you turn your logic around and hide only the ones you don't want to see? Like so:
$(document).ready(function() {
var consolidatedArray = $("table tbody tr td").slice();
$("#search").keyup(function() {
var search = $(this).val();
$("table tbody tr").show()
$(".header-1").show();
$(".header-2").show();
$("table tbody tr td:not(:contains(" + search + "))").each(function() {
$(this).closest("tr").hide();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>abc</td>
</tr>
<tr>
<td>efg</td>
</tr>
<tr>
<td>xsd</td>
</tr>
<tr>
<td>sdf</td>
</tr>
<tr>
<td>ffs</td>
</tr>
<tr>
<td>abc</td>
</tr>
</tbody>
</table>
<input id="search" type="text"/>

How to toggle table contents with jQuery

I have a button, when I click it the tables td's must be empty, on second click they must be filled again.
Problem is, when I use .empty() it leaves the table empty and I can't restore the values.
.hide() and .show() only works with html elements, they cant hide/show content.
.html() and .text() selects the content but I can't find the way to toggle them.
jQuery code:
$('#totalsTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = totalsTable.row(tr);
if (row.child.isShown()) {
$('#totalsTable .active td:nth-child(6), .active td:nth-child(3), .active td:nth-child(4), .active td:nth-child(5)').html().show();
} else {
$('#totalsTable .active td:nth-child(6), .active td:nth-child(3), .active td:nth-child(4), .active td:nth-child(5)').html().hide();
}
});
HTML
<table id="totalsTable" class="table table-bordered small table-hover" width="100%">
<thead>
<tr>
<th></th>
<th>#{label['regress.totals']}</th>
<th>#{label['regress.description']}</th>
<th>#{label['regress.totals.debt']}</th>
<th>#{label['regress.totals.paid']}</th>
<th>#{label['regress.totals.debt']}<i class="fa fa-plus text-success" />#{label['regress.totals.overpay']}<i class="fa fa-minus text-danger" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>#{label['regress.totals.main-total']}</td>
<td>Kelių žodžių komentaras</td>
<td>3478 Eur</td>
<td>478 Eur</td>
<td class="text-success">3000 Eur</td>
</tr>
<tr class="active">
<td class="details-control"></td>
<th>#{label['regress.totals.extra-totals']}</th>
<td>Kelių žodžių komentaras</td>
<td>3478 Eur</td>
<td>4000 Eur</td>
<td class="text-danger">-522 Eur</td>
</tr>
<tr class="extra" hidden="true">
<td></td>
<td>Už žalų administravimą
</td>
<td>Kelių žodžių komentaras</td>
<td>200 Eur
</td>
<td>120 Eur</td>
<td class='text-success'>80 Eur</td>
</tr>
<tr class="extra" hidden="true">
<td></td>
<td>Bylinėjimo išlaidos
</td>
<td>Kelių žodžių komentaras</td>
<td>200 Eur
</td>
<td>120 Eur</td>
<td class='text-success'>80 Eur</td>
</tr>
<tr class="extra" hidden="true">
<td></td>
<td>Bylinėjimo išlaidos
</td>
<td>Kelių žodžių komentaras</td>
<td>200 Eur
</td>
<td>120 Eur</td>
<td class='text-success'>80 Eur</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th colspan="2" style="text-align:right">#{label['regress.total-sum']}</th>
<th>6956 Eur</th>
<th>4478 Eur</th>
<th class="text-success">2478 Eur</th>
</tr>
</tfoot>
</table>

Once you use .empty(), it deletes the content (by emptying it). The contents cannot be restored because it's been deleted.
You can get around this by adding an inner element and show / hide that, eg:
<table>
<tr>
<td><div>content</div></td>
then
$("table td:nth-child(0) > div,table td:nth-child(6) > div").hide();
or, you can store the existing value before removing it, eg:
$("table td:nth-child(0)").each(function() {
$(this).data($(this).html());
$(this).html("");
});
then, to restore:
$("table td:nth-child(0)").each(function() {
$(this).html($(this).data("store"));
});
Note, you need to use .each as each element's value in the selector needs to store its own value.

Do something like this
// Selecting all elements
$el = $('#totalsTable .active td:nth-child(6), .active td:nth-child(3), .active td:nth-child(4), .active td:nth-child(5)');
if (row.child.isShown()) {
$el.each(function () {
// Setting HTML from data-val
$(this).html($(this).data("val"));
});
} else {
$el.each(function () {
// Setting data-val equals to html which can be used later and emptying the html
$(this).data("val", $(this).html());
$(this).html("");
});
}

I see others have now answered with what are most probably better solutions, but here is a fiddle I made in case it helps: https://jsfiddle.net/w81qtgp2/
$('table').click(function () {
$(this).children().each(function () {
if ($(this).html() === '<td> </td>') {
$(this).html($(this).data('text'));
} else {
var tdText = ($(this).html());
$(this).data('text', tdText);
$(this).html('<td> </td>');
}
});
});