We Keep Coding

How to delete table rows uisng javascript

I want to delete every row from the table using javascirpt Here's the code
I tried using .remove function but it did'nt work out...
HTML TABLE CODE
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT CODE
if(tablebody.children.length > 0)
{
for (let i = 0; i < tablebody.children.length; i++)
{
tablebody.children[i].remove()
}
}

Explination
This will get all tr (rows) for the tables body.
Then it will delete (remove) any that it finds
Solution
let trs = document.querySelectorAll('#table_body tr');
trs.forEach((tr)=>{
tr.remove();
});

Find all table rows, iterate over them using for of then remove each row with Element.remove().
const rows = document.querySelectorAll("#table_body tr");
for (const row of rows) {
row.remove();
}
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td>mess fee</td>
<td>2500</td>
<td>0</td>
<td>
<input
type="number"
id="remaing_amount"
name="remaing_amount[]"
class="form-control"
placeholder="Enter Paid Amount"
/>
</td>
</tr>
</tbody>
</table>
</div>

If you want to delete all tr maybe you should do something like this
document.getElementById('table_body').innerHTML = ''
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>

Try this way...
const tBody = document.querySelector('#table_body');
const tRow =document.querySelector('#table_body tr')
if (tBody.contains(tRow) {
tRow.remove();
}

try this code:
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr id = "row1">
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
<button onclick = "deletetr()">
Click here
</button>
<script>
function deletetr() {
document.getElementById("row1").remove();
}
</script>
</div>

Bootstrap: data-sort on dynamic table

I have a bootstrap table as follows:
<table id="fullDataTable"
class="table table-bordered"
data-toggle="table"
data-classes="table"
data-striped="true"
data-sort-name="numFrame"
data-sort-order="desc">
<thead>
<tr>
<th class="col-sm-1"
data-field="numFrame"
data-sortable="true">numFrame</th>
<th class="col-sm-1"
data-field="timeStamp"
data-sortable="false">timeStamp</th>
<th class="col-sm-1"
data-field="id_robot"
data-sortable="false">idRobot</th>
</tr>
</thead>
<tbody id="dataTable">
</tbody>
</table>
The table is then filled dynamically with values from a MySQL database with Javascript:
socket.on('gotDataQuality', function(message) {
if(message == 0){
alert('No Quality datas for this session');
clearElement("dataTable");
}else{
clearElement("dataTable");
for (var i = message.length-1; i >= 0; i--) {
$('#dataTable').prepend('<tr><td>'+message[i].numFrame+'</td><td>'+message[i].timeStamp+ '</td><td>'+message[i].idRobot+'</td></tr>');
}
}
});
The table fills correctly but when I attempt to sort it (by clicking on one of the sortable headers) the contents of the table is erased. I'm not entirely sure how the data-sort element works, what can I do to resolve this?

You can use List JS
You can make use of this example
var options = {
valueNames: [ 'id', 'firstname', 'lastname','username' ]
};
var userList = new List('table', options);
.table [data-sort] {
cursor: pointer;
}
.table [data-sort]::after {
margin-left: .25rem;
content: url('data:image/svg+xml;utf8,<svg width=\'6\' height=\'10\' viewBox=\'0 0 6 10\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'><path fill-rule=\'evenodd\' clip-rule=\'evenodd\' d=\'M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z\' fill=\'%238898aa\'/></svg>');
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div id="table">
<table class="table">
<thead>
<tr>
<th scope="col" class="sort" data-sort="id">#</th>
<th scope="col" class="sort" data-sort="firstname">First Name</th>
<th scope="col" class="sort" data-sort="lastname">Last Name</th>
<th scope="col" class="sort" data-sort="username">Username</th>
</tr>
</thead>
<tbody class="list">
<tr>
<th scope="row" class="id">1</th>
<td class="firstname">Mark</td>
<td class="lastname">Otto</td>
<td class="username">#mdo</td>
</tr>
<tr>
<th scope="row" class="id">2</th>
<td class="firstname">Jacob</td>
<td class="lastname">Thornton</td>
<td class="username">#fat</td>
</tr>
<tr>
<th scope="row" class="id">3</th>
<td class="firstname">Larry</td>
<td class="lastname">the Bird</td>
<td class="username">#twitter</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
CodePen

Col Span Split For First td cell with table header

<table border="1">
<tr>
<th scope="col" colspan="1">Header</th>
<th scope="col" colspan="2" >Header</th>
<th scope="col" colspan="1">Header</th>
</tr>
<tr>
<td colspan="2">Col 3</td>
<td colspan="1">Col 1</td>
<td colspan="1">Col 2</td>
</tr>
</table>
From the above code i need to share first td with two th cells. how it is possible to share the first td cell to share with th if td colspan is greater than th colspan. I got error in first td cell only while sharing with two th headers?

Try This :
<table border="1">
<colgroup>
<col style="width:25%;" />
<col style="width:25%;" />
<col style="width:25%;" />
<col style="width:25%;" />
</colgroup>
<tr>
<th scope="col" colspan="1">Header</th>
<th scope="col" colspan="2" >Header</th>
<th scope="col" colspan="1">Header</th>
</tr>
<tr>
<td colspan="2">Col 3</td>
<td colspan="1">Col 1</td>
<td colspan="1">Col 2</td>
</tr>
</table>

The width of the td normally depends on the data in nth td of all rows.
<table border="1">
<tr>
<th>Month</th>
<th colspan="2">Savings</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$8000</td>
</tr>
<tr>
<td colspan="4">Sum: $180</td>
</tr>
</table>

Get the running balance of several tables with JQuery

I have several tables with the same structure. It has different values for the price. I want to get the running balance of the price column. So I want to get the sum and print each iteration in the running balance column. For example. In the Price column I have 400, 425 and 350 so in the running balance column, I should have 400, 825, 1175. Currently, I'm only getting the sum.
Here is my html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
here is my javascript
$('.runningBal').each(function() {
var sum = 0;
$(this).parents('table').find('.price').each(function() {
var floted = parseFloat($(this).text());
if (!isNaN(floted)) sum += floted;
$('.runningBal').html(sum);
})
//$(this).html(sum);
});
Here is the fiddle

Well people in the comments are right to say that if the product prices are constant, you should render it server-side while you loop.
Anyway, this will do the job :
$("table").each(function() {
var sum = 0;
$(this).find(".runningBal").each(function() {
sum += +$(this).prev(".price").text();
$(this).text(sum);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>

jquery working in firefox but not in chrome

Ok i know this might sound like a duplicate question, as a lot of questions have been asked like this one...but i have looked into almost all of them and could not find what the solution.
Ok I am getting the following response from the server using normal ajax call:
<form id="ctl00" name="ctl00" method="post" action="RatesGrids.aspx?pt=EMPL&RT=bill">
<div>
<input id="__VIEWSTATE" type="hidden" name="__VIEWSTATE" value="/wEPDwUENTM4MQ9kFgJmD2QWAmYPPCsADQEADxYCHgtfIUl0ZW1Db3VudAICZGQYAQUMZ3JkQmlsbFJhdGVzDzwrAAoBCAIBZE4pvNtSHIbu7h7ISmN42ktJBm5R">
</div>
<div>
<table id="grdBillRates" class="tableView" cellspacing="0" rules="all" border="1" style="width:100%;border-collapse:collapse;">
<thead>
<tr class="tableViewHeader">
<th scope="col" style="white-space:normal;">Emp. Id</th>
<th scope="col" style="white-space:normal;">Last Name</th>
<th scope="col" style="white-space:normal;">*Res Usage</th>
<th scope="col" style="white-space:normal;">Source</th>
<th scope="col" style="white-space:normal;">Eff. Date</th>
<th scope="col" style="white-space:normal;">*Bill 1</th>
<th scope="col" style="white-space:normal;">*Bill 2</th>
<th class="display_none" scope="col" style="white-space:normal;"></th>
<th class="display_none" scope="col" style="white-space:normal;">Time Stamp</th>
<th scope="col" style="white-space:normal;">Currency</th>
</tr>
</thead>
<tbody>
<tr class="tableViewRow" onclick="loadrowitems(0,this)" onmouseover="this.style.cursor='default';">
<td style="width:100px;white-space:normal;">10000000034 </td>
<td style="width:125px;white-space:normal;">Khan</td>
<td style="width:125px;white-space:normal;"></td>
<td style="width:80px;white-space:normal;">Local</td>
<td style="width:80px;white-space:normal;">12/04/2012</td>
<td align="right" style="width:80px;white-space:normal;">3.6500</td>
<td align="right" style="width:80px;white-space:normal;">6.0000</td>
<td class="display_none" style="width:0px;white-space:normal;">Z-C$ </td>
<td class="display_none" style="white-space:normal;">0,0,0,0,1,107,21,255</td>
<td style="width:70px;white-space:normal;">Z-C$</td>
</tr>
<tr class="tableViewAlternatingRow" onclick="loadrowitems(1,this)" onmouseover="this.style.cursor='default';">
<td style="width:100px;white-space:normal;">10000000034 </td>
<td style="width:125px;white-space:normal;">Khan</td>
<td style="width:125px;white-space:normal;">444 </td>
<td style="width:80px;white-space:normal;">Local</td>
<td style="width:80px;white-space:normal;">12/04/2012</td>
<td align="right" style="width:80px;white-space:normal;">2.1000</td>
<td align="right" style="width:80px;white-space:normal;">3.2000</td>
<td class="display_none" style="width:0px;white-space:normal;">Z-C$ </td>
<td class="display_none" style="white-space:normal;">0,0,0,0,1,107,21,254</td>
<td style="width:70px;white-space:normal;">Z-C$</td>
</tr>
</tbody>
</table>
</div>
</form>
Now i have to append the table in response in <div id="grdRates"></div>.
The application i am working on was created only keeping IE in mind, so it was catered using the following code:
if (contents) {
var table;
if ($(contents).find('table').length > 0)
table = $(contents).find('table')[0].xml
if (table) {
$('#grdRates').parent().show();
$('#grdRates').html(table);
}
}
above code was not working in Firefox as well as Chrome , was giving that xml as undefined and never showing the results, so i tried the following:
if (contents) {
var table;
if ($(contents).find('table').length > 0)
if ($.browser.msie)
table = $(contents).find('table')[0].xml
else
table = $(contents).find('#grdBillRates');
if (table) {
$('#grdRates').parent().show();
if ($.browser.msie)
$('#grdRates').html(table);
else
$('#grdRates').html(table.parent().html());
}
}
}
Note the #grdBillRates is the table id in the above HTML. Now this is working fine in firefox (showing the grid fine) but i have tried almost everything for chrome, but no luck....
And one more thing i cannot change the DLL so the solution has to be using script. Any help will be appreciated guys...Thanks

is there any error?
did you try to append it? something like this:
if (contents) {
var table = $(contents).find('#grdBillRates');
if (table.length > 0)
$('#grdRates').parent().show().append(table);
}
}