I have an html which, of course, have a table element, and in the tbody, I have a button that will delete rows of the table.
I have assigned an onclick="" function to the button. (Function here)
How to delete only the rows on the body of the table (tbody), and not the row in the head of the table (thead) ?
FIDDLE HERE
Wrap body rows to tbody element and than you can to select only table tbody tr to be removed. With jQuery you can do $('table tbody tr').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some content</td>
<td>
<button onClick="$(this).closest('tr').remove()">Remove</button>
</td>
</tr>
<tr>
<td>Some content</td>
<td>
<button onClick="$(this).closest('tr').remove()">Remove</button>
</td>
</tr>
<tr>
<td>Some content</td>
<td>
<button onClick="$(this).closest('tr').remove()">Remove</button>
</td>
</tr>
<tr>
<td>Some content</td>
<td>
<button onClick="$(this).closest('tr').remove()">Remove</button>
</td>
</tr>
</tbody>
</table>
<button onClick="$('#table tbody tr').remove()">Remove all rows</button>
Related
I have data in source table and i want to copy and append row to destination table on button click of specific row. There is an h1 where I want to display column total of price column of destination table. Also I need button on destination table from which I can remove the selected row from that table.
<table id="source_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Copy</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >Product 1</td>
<td >$10</td>
<td>
<button type="button" class="copy-row" >+</button>
</td>
</tr>
<tr>
<td>2</td>
<td >Product 2</td>
<td >$20</td>
<td>
<button type="button" class="copy-row" >+</button>
</td>
</tr>
<tr>
<td>3</td>
<td >Product 3</td>
<td >$30</td>
<td>
<button type="button" class="copy-row" >+</button>
</td>
</tr>
</tbody>
</table>
<table id="dest_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div> Total Price <h1> <!-- I want to show price column(dest_table) total here -> </h1> </div>
Consider the following example.
$(function() {
function calcTotal(t) {
var rows = $("tbody tr", t);
var total = 0.00;
var val;
rows.each(function(i, r) {
val = $("td:eq(2)", r).text().substr(1);
total += parseFloat(val);
});
$(".total").html("$" + total);
}
$(".copy-row").click(function(e) {
var src = $(this).closest("tr");
var dst = $("#dest_table tbody");
src.clone().appendTo(dst);
$("#dest_table tbody tr:last td:eq(3) button").toggleClass("copy-row del-row").html("X");
calcTotal($("#dest_table"));
});
$("#dest_table tbody").on("click", ".del-row", function(e) {
if (confirm("Are you sure you want to remove this row?")) {
$(this).closest("tr").remove();
}
calcTotal($("#dest_table"));
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="source_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Copy</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>$10</td>
<td>
<button type="button" class="copy-row">+</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>$20</td>
<td>
<button type="button" class="copy-row">+</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Product 3</td>
<td>$30</td>
<td>
<button type="button" class="copy-row">+</button>
</td>
</tr>
</tbody>
</table>
<table id="dest_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="total"> Total Price
<h1></h1>
</div>
This makes use of a lot of elements, yet at it's core, it does clone the row, and appends the clone to the destination.
Do you want something like this:
$(document).ready(function(){
$(".copy-row").click(function(){
var currentRow=$(this).closest("tr");
var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
var col3=currentRow.find("td:eq(2)").text(); // get current row 3rd TD
var col4=currentRow.find("td:eq(3)").text(); // get current row 4th TD
var markup = "<tr><td>" + col1 + "</td><td>" + col2 + "</td><td>" + col3 + "</td><td>" + col4 + "</td></tr>";
$("#dest_table tbody").append(markup);
// sum of price
var sum = 0;
$('#dest_table tbody tr').each(function() {
var price = $(this).find('td:eq(2)').text();
price = price.replace('$', '');
sum += parseInt(price);
});
$('#total').text('$' + sum);
});
});
But I highly recommend you use some framework like React, Vue or Svelte. Your life will be easier.
I want to filter the type column, one button filters the aquatic and in the other all except the aquatic
<button type="button" onclick="Aquatic()">Aquatic</button>
<button type="button" onclick="NotAquatic()" >everything but aquatic</button>
<table class="table" >
<thead>
<tr>
<th scope="col">Animal</th>
<th scope="col">Type </th>
</tr>
</thead>
<tbody id="" >
<tr>
<td>bat</td>
<td>aerial</td>
</tr>
<tr>
<td>Fish</td>
<td>Aquatic</td>
</tr>
<tr>
<td>Horse</td>
<td>Land</td>
</tr>
<tr>
<td>Shark</td>
<td>Aquatic</td>
</tr>
<tr>
<td>Elephant</td>
<td>Land</td>
</tr>
<tr>
<td>Whale</td>
<td>Aquatic</td>
</tr>
<tr>
<td>dove</td>
<td>aerial</td>
</tr>
</tbody>
</table>
Hopefully this helps point you in the right direction! have a filterTable function which grabs all the table rows, and removes any inline style changes previously added to display. Then, I filter all the trs by the innerHTML content not including the term, and I take all those trs and set their display to none
function filterTable(aquaShown) {
const trs = [...document.querySelectorAll("tbody tr")];
trs.forEach(tr => tr.style.display = "");
const hiddenTrs = aquaShown ?
trs.filter(tr => !tr.innerHTML.includes("Aquatic")) :
trs.filter(tr => tr.innerHTML.includes("Aquatic"));
hiddenTrs.forEach(tr => tr.style.display = "none");
}
function aquatic() {
filterTable(true);
}
function nonaquatic() {
filterTable(false);
}
<button type="button" onclick="aquatic()">Aquatic</button>
<button type="button" onclick="nonaquatic()">Non-Aquatic</button>
<table class="table">
<thead>
<tr>
<th scope="col">Animal</th>
<th scope="col">Type </th>
</tr>
</thead>
<tbody id="">
<tr>
<td>Fish</td>
<td>Aquatic</td>
</tr>
<tr>
<td>Horse</td>
<td>Land</td>
</tr>
<tr>
<td>Shark</td>
<td>Aquatic</td>
</tr>
<tr>
<td>Elephant</td>
<td>Land</td>
</tr>
<tr>
<td>Whale</td>
<td>Aquatic</td>
</tr>
</tbody>
</table>
EDIT refactored based on further clarification in comments
Hi my tab is generate by an app and i can't add in the html code the thead and tbody tags.
So i would like add with javascript the tags
actually my code is :
...
<table id="__bookmark_1">
<tr>
<th>name</th>
<th>adress</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
...
and i would like
...
<table id="__bookmark_1">
<thead>
<tr>
<th>name</th>
<th>adress</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tbody>
</table>
...
Thanks
hi in fact it to use datatables code
i have founfd the way to
var myTable = jQuery("#__bookmark_1");
var thead = myTable.find("thead");
var thRows = myTable.find("tr:has(th)");
if (thead.length===0){ //if there is no thead element, add one.
thead = jQuery("<thead></thead>").appendTo(myTable);
}
var copy = thRows.clone(true).appendTo("thead");
thRows.remove();
When the user clicks on the 'Number' column I want to be able to get the 'Name' column value in the same row. So for example if I clicked on '999' I would want to be able to get David.
$('#table').on('click', 'td:nth-child(2)', function()
{
row = $(this).text();
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
You can use $(this).closest('tr').find('td:first').text() to get the closest first td and its text.
If the wanted item is inside of the tr but you dont know the place or you want it dynamically, you can add a class or id to the name td and change the code to this $(this).closest('tr').find('#WantedRowId').text()
$('#table').on('click', 'td:nth-child(2)', function() {
alert($(this).closest('tr').find('td:first').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
You can find below a more appropriate solution that dynamically checks what is the "Name" column index and retrieves accordingly.
As such, if you insert other columns, like ID and what not, it'll still work without updating this specific logic.
$('#table').on('click', 'td:nth-child(2)', function()
{
$td = $(this);
indexCol = $td.closest('table').find('td:contains(Name)').index()
alert( $td.closest('tr').find('td').eq(indexCol).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
<tbody>
<tr class="th">
<td>
this is a heead
</td>
<td>
</td>
</tr>
<tr>
<td>
Half Pallets
</td>
<td>4 Full Pallet
</td>
</tr>
<tr>
<td>
<td>4 Full Pallet
</td>
</tr>
</tbody>
Take a look,Suppose i want to add the tr for first tr.th then I want to set them on last tr then first tr.th but how I can do.
If their is multiple tr.th in table then I need to set the tr from last from second tr.th in my case.
Could you show me how I can do this.
thanks
Assuming you have some HTML like so:
<table>
<tbody>
<tr class="th">
<td>Some header</td>
</tr>
<tr>
<td>Some data</td>
</tr>
<tr>
<td>Some more data</td>
</tr>
<tr class="th">
<td>Another header</td>
</tr>
<tr>
<td>Some data</td>
</tr>
<tr>
<td>Some more data</td>
</tr>
</tbody>
</table>
Then I assume you want the resultant HTML to look like this:
<table>
<tbody>
<tr class="th">
<td>Some header</td>
</tr>
<tr>
<td>Some data</td>
</tr>
<tr>
<td>Some more data</td>
</tr>
<tr>
<td>A new bit of data in a new row</td>
</tr>
<tr class="th">
<td>Another header</td>
</tr>
<tr>
<td>Some data</td>
</tr>
<tr>
<td>Some more data</td>
</tr>
</tbody>
</table>
In that case, you could use the following jQuery:
var headerRows = $('tr.th');
if(headerRows.length > 1) {
var headerRow = headerRows.get(1);
$(headerRow).before('<tr><td>A new bit of data in a new row</td></tr>');
}
else if(headerRows.length == 1) {
var headerRow = headerRows.get(0);
$(headerRow).closest('tbody').append('<tr><td>A new bit of data in a new row</td></tr>');
}
else {
// no header rows - do nothing?
}
Working DEMO
Or, a fiddle that adds a new row before the next <tr> element with the class th when a <tr> element with the class th is clicked on: Updated DEMO
you could do (i intended that you want to add a new <tr> to the end of the table: if the last <tr> has the class th you want to add the new <tr> before the <tr class="th"> :
//get the last tr
var trLast = $('tr:last');
//create a tr to add
var trToAdd = $('<tr>');
//if the last tr has the class th
if(trLast.hasClass('th'){
//add the new tr before the last
trLast.before(trToAdd);
}else{
//add the new tr after the last
trLast.after(trToAdd);
}