How to delete table rows uisng javascript - 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>

Related

How can I filter the column type of the table using two buttons?

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

Removing bootstrap table rows using JavaScript

I'm trying to achieve a table which allows the user to delete specific rows; Using JavaScript and bootstrap. I used the canonic way, but it seems to not work:`
<form action="scrivi.php" method="POST">
<table class="table" id="tab">
<thead>
<tr>
<th scope="col">Docente</th>
<th scope="col">Prima ora</th>
<th scope="col">Seconda ora</th>
<th scope="col">Terza ora</th>
<th scope="col">Quarta ora</th>
<th scope="col">Quinta</th>
<th scope="col">Sesta ora</th>
</tr>
</thead>
<tbody>
<?php
echo sprintf('<td><button type="button" onClick="rimuovi(0)">Submit</button></td>');
?>
</tbody>
</table>
the JavaScript function:
fuction rimuovi(i){
var table = getElementById("tab").deleteRow(0);
}
I know that I could fix the problem using google Ajax, but I remember that there is an easier way to solve it. I tried everything I could.
here is a working example
const table = document.getElementById('tab')
table.addEventListener('click',(e)=>{
if(e.target.tagName.toLowerCase()=="button")
{
table.querySelector("tbody").removeChild(e.target.parentElement.parentElement)
}
})
<table class="table" id="tab">
<thead>
<tr>
<th scope="col">Docente</th>
<th scope="col">Prima ora</th>
<th scope="col">Seconda ora</th>
<th scope="col">Terza ora</th>
<th scope="col">Quarta ora</th>
<th scope="col">Quinta</th>
<th scope="col">Sesta ora</th>
</tr>
</thead>
<tbody>
<tr>
<td>hey </td>
<td>hey </td>
<td>hey </td>
<td>hey </td>
<td>hey </td>
<td>hey </td>
<td><button>delet</button> </td>
</tr>
<tr>
<td>hey </td>
<td>hey </td>
<td>hey </td>
<td>hey </td>
<td>hey </td>
<td>hey </td>
<td><button>delet</button> </td>
</tr>
<tr>
<td>hey </td>
<td>hey </td>
<td>hey </td>
<td>hey </td>
<td>hey </td>
<td>hey </td>
<td><button>delet</button> </td>
</tr>
</tbody>

JavaScript data-toogle

I have a table in html and want to replace that table with another table when a button is pressed and again back to first table when second button is pressed. i tried this roughly in a html file and it is working but when same logic i applied in my django project to toggle table data it is not working. Below is the JS ansd CSS code.
CSS
table.hidden {
display: none;
}
JavaScript
document.getElementById("b1").addEventListener("click", function() {
document.getElementById("01").innerHTML = document.getElementById(
"02"
).innerHTML;
});
document.getElementById("b2").addEventListener("click", function() {
document.getElementById("01").innerHTML = document.getElementById(
"03"
).innerHTML;
});
The html table and buttons code is as follows
<button id="b1" class="btn btn-outline-success btn-xs mb-2 ml-5" style="font-size: 0.8em;">Daily Sale </button>
<button id="b2" class="btn btn-outline-success btn-xs mb-2 ml-2" style="font-size: 0.8em;">Monthly</button>
<table id="01" class="table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">Customer</th>
<th scope="col">Quantity (MT)</th>
<th scope="col">Bulkers</th>
</tr>
</thead>
<tbody>
{% for x,y,z in sum_list %}
<tr>
<td scope="row"></td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<table id="02" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">Customer</th>
<th scope="col">Quantity (MT)</th>
<th scope="col">Bulkers</th>
</tr>
</thead>
<tbody>
{% for x,y,z in sum_list %}
<tr>
<td scope="row"></td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<table id="03" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">ABC</th>
<th scope="col">XYZ</th>
<th scope="col">ASD</th>
</tr>
</thead>
<tbody>
{% for x,y,z in month_sum %}
<tr>
<td scope="row"></td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
{% endfor %}
</tbody>
</table>
The table with id 01 will be default table and will be visible when page is load. The table with id 02 will be shown when button with id b1 is pressed and table with id 03 with button having id b2. please help me solving this.
Here's your original code, just removed the spare </div> tag, it seems to be working though. Can you tell what the problem is? As mentioned in my comment above, showing and hiding DIV tags would be a far better approach, without the need of the redundant third table.
document.getElementById("b1").addEventListener("click", function() {
document.getElementById("01").innerHTML = document.getElementById(
"02"
).innerHTML;
});
document.getElementById("b2").addEventListener("click", function() {
document.getElementById("01").innerHTML = document.getElementById(
"03"
).innerHTML;
});
table.hidden {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button id="b1" class="btn btn-outline-success btn-xs mb-2 ml-5" style="font-size: 0.8em;">Daily Sale </button>
<button id="b2" class="btn btn-outline-success btn-xs mb-2 ml-2" style="font-size: 0.8em;">Monthly</button>
<table id="01" class="table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">Customer</th>
<th scope="col">Quantity (MT)</th>
<th scope="col">Bulkers</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
<tr>
<td scope="row">2</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
</tbody>
</table>
<table id="02" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">Customer</th>
<th scope="col">Quantity (MT)</th>
<th scope="col">Bulkers</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
<tr>
<td scope="row">2</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
</tbody>
</table>
<table id="03" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">ABC</th>
<th scope="col">XYZ</th>
<th scope="col">ASD</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
<tr>
<td scope="row">2</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
</tbody>
</table>
Here is a simple code to show you "my" method to do this
const btChangeTable = document.getElementById('bt-Change-Table')
, AllTableDiv = document.getElementById('All-tables')
, TableActiv = { current:0, classList: [ 'table1', 'table2', 'table3' ] }
;
btChangeTable.onclick = () =>
{
TableActiv.current = ++TableActiv.current % TableActiv.classList.length
AllTableDiv.className = TableActiv.classList[ TableActiv.current ]
}
table {
margin : 1em;
border-collapse : collapse;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
}
td {
border : 1px solid gray;
text-align : center;
padding : .7em 0;
width : 2em;
}
#All-tables.table1 > #Table-2,
#All-tables.table1 > #Table-3 { display : none }
#All-tables.table2 > #Table-1,
#All-tables.table2 > #Table-3 { display : none }
#All-tables.table3 > #Table-1,
#All-tables.table3 > #Table-2 { display : none }
<button id="bt-Change-Table">Change Table view</button>
<div id="All-tables" class="table1">
<table id="Table-1">
<caption> table 1 - Daily Sale </caption>
<tbody>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr>
<tr> <td>e</td> <td>f</td> <td>g</td> <td>h</td> </tr>
</tbody>
</table>
<table id="Table-2">
<caption> table 2 - Monthly Sale </caption>
<tbody>
<tr> <td>i</td> <td>j</td> <td>k</td> <td>l</td> </tr>
<tr> <td>m</td> <td>n</td> <td>o</td> <td>p</td> </tr>
</tbody>
</table>
<table id="Table-3">
<caption> table 3 - Year Sale </caption>
<tbody>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr>
<tr> <td>m</td> <td>n</td> <td>o</td> <td>p</td> </tr>
</tbody>
</table>
</div>

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>

How to select last row of a table?

I have the following div:
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>
How do I make it select the last row of it with javascript or jquery? I've tried doing it like this
$("[.OrderList][tr:last]").focus();
But with no success
Use this code:
.OrderList >.table > tbody > tr:last-child { background:#ff0000; }
Try this :
$('#yourtableid tr:last').attr('id');
or this:
$("#TableId").find("tr").last();
Hope this if helpful :)
console.log($(".OrderList tr").last().html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>
Try this code You can achieve it by:
$('#first table:last tr:last')
$('#yourtableid tr:last').attr('id').focus();
or
$('#yourtableid tr:last')[0].focus();
should work.
console.log($(".OrderList table tr:last").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>

Categories