JavaScript data-toogle - javascript

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>

Related

JavaScript - Hide first element on add new row on table

I have a List of Products as follows:
<table class="table table-bordered">
<thead class="thead-green">
<tr>
<th>Product Name</th>
<th>Product Model</th>
<th>Description</th>
<th>Price</th>
<th>Add Service</th>
</tr>
</thead>
<tbody>
#if (Products.Any())
{
#foreach (var product in Products)
{
<tr #onclick="(() => SetProductForUpdate(product))">
<td>#product.Name</td>
<td>#product.Name</td>
<td>#product.Description</td>
<td>#product.Price</td>
<td><button style="background-color:#0275d8;" class="btn btn-primary btn-medium" onclick="mirko('dataTable2');">Add</button></td>
</tr>
}
}
else
{
<tr><td colspan="6"><strong>No products available</strong></td></tr>
}
</tbody>
</table>
That gets the following:
if i click the Add button the selected items are added to a table with the following JavaScript function:
function mirko(tableID) {
var table = document.getElementById(tableID)
for (var l = 0; l < 1; l++) {
var cl = table.tBodies[0].rows[l].cloneNode(true)
table.tBodies[0].appendChild(cl)
}
}
And here is the table:
<div class="table-responsive">
<table id="dataTable2" class="table table-striped table-borderless border-0 border-b-2 brc-default-l1">
<thead class="bg-none bgc-default-tp1">
<tr class="text-white">
<th class="opacity-2"><p class="tab">#</p></th>
<th><p class="tab">Name</p></th>
<th><p class="tab">Model</p></th>
<th><p class="tab">Description</p></th>
<th><p class="tab">Qty</p></th>
<th><p class="tab">Unit Price</p></th>
<th width="140"><p class="tab">Amount</p></th>
</tr>
</thead>
<tbody>
<tr id="module">
#*<td>1</td>*#
#* <td>#UpdateProduct.Name</td>
<td>#UpdateProduct.Model</td>
<td>#UpdateProduct.Description</td>
<td>1</td>
<td>#UpdateProduct.Price</td>
<td>#UpdateProduct.Price</td>*#
<td><p class="tab">1</p></td>
<td><p class="tab">#UpdateProduct.Name</p></td>
<td><p class="tab">#UpdateProduct.Name</p></td>
<td><p class="tab">#UpdateProduct.Description</p></td>
<td><p class="tab">1</p></td>
<td class="tab text-95"><p class="tab">#UpdateProduct.Price</p></td>
<td class="tab text-secondary-d2"><p class="tab">#UpdateProduct.Price</p></td>
</tr>
</tbody>
</table>
</div>
which gets the following with the purpose to generate a price Quotation with the selected products
My issues as shown in the screenshot above, there is always one product empty, which is generated because of this part inside my table (Quotation template): How can i hide, or prevent that?
<tbody>
<tr id="module">
#*<td>1</td>*#
#* <td>#UpdateProduct.Name</td>
<td>#UpdateProduct.Model</td>
<td>#UpdateProduct.Description</td>
<td>1</td>
<td>#UpdateProduct.Price</td>
<td>#UpdateProduct.Price</td>*#
<td><p class="tab">1</p></td>
<td><p class="tab">#UpdateProduct.Name</p></td>
<td><p class="tab">#UpdateProduct.Name</p></td>
<td><p class="tab">#UpdateProduct.Description</p></td>
<td><p class="tab">1</p></td>
<td class="tab text-95"><p class="tab">#UpdateProduct.Price</p></td>
<td class="tab text-secondary-d2"><p class="tab">#UpdateProduct.Price</p></td>
</tr>
</tbody>

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>

Calculation in multiple Html tables on a single page

I want to perform calculations at the end of every table (on a footer) in a single page.
Suppose I have two tables and I want to perform calculations on a Total Amount column.
How can I do that using Jquery and Javascript?
There might be more than two tables so please be sure it works on multiple tables on a single page.
These values in HTML table are gained using for loop in Django.
This image contains 2 HTML tables and I want calculations on both table on a total amount column.
<div class="row">
<div class="table-responsive col-md-6">
<table id="example" class="table table-striped table-bordered table-responsive-xl">
<caption style="caption-side:top; text-align: center;"><h3>Income</h3></caption>
<thead class="thead-dark">
<tr>
{# <th>S No.</th>#}
<th>Particulars</th>
<th>Description</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
{% for item in all_profit %}
{% if item.category.under == "Income" %}
<tr>
{# <td>{{ }} </td>#}
<td>{{item.category}}</td>
<td>{{item.category.desc}}</td>
<td>{{ item.balance }} </td>
</tr>
{% endif %}
{% endfor %}
</tbody>
<tfoot>
<tr class="totalColumn">
<td style="visibility:hidden;"></td>
<td>Total:</td>
</tr>
</tfoot>
</table>
</div>

I set same class for each income item's total amount then get them with Jquery and convert them to Int and calculate total.
$(document).ready(function() {
var total = 0;
$('.income-amount').each(function(i, obj) {
total += parseInt($(obj).text());
});
$('#income-total').text(total.toFixed(1));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="row">
<div class="table-responsive col-md-6">
<table id="example" class="table table-striped table-bordered table-responsive-xl">
<caption style="caption-side:top; text-align: center;">
<h3>Income</h3>
</caption>
<thead class="thead-dark">
<tr>
<th>S No.</th>
<th>Particulars</th>
<th>Description</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 </td>
<td>A</td>
<td> </td>
<td class='income-amount'>2000.0 </td>
</tr>
<tr>
<td>1 </td>
<td>B</td>
<td> </td>
<td class='income-amount'>1400.0 </td>
</tr>
</tbody>
<tfoot>
<tr class="totalColumn">
<td style="visibility:hidden;"></td>
<td id='income-total'>Total:</td>
</tr>
</tfoot>
</table>
</div>

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>

bootstrap numbered of rows in table

I've been trying to make a table with bootstrap. I've found that it's actually possible to do something alike to auto-increment. The example could be seen here:
http://jsfiddle.net/DominikAngerer/yx275pyd/2/
<table data-toggle="table" data-
url="/gh/get/response.json/wenzhixin/bootstrap-
table/tree/master/docs/data/data1/">
<thead>
<tr>
<th data-formatter="runningFormatter">Index</th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
and using following jscript
function runningFormatter(value, row, index) {
return index;
}
The problem is its using data from remote url. can i do something similiar with a table that has some preset values by my already? the goal of this is that i could prepend new rows to table and it would index rows. the starting table could look something like this:
<table class="table table-inverse">
<thead class="thead-default">
<tr>
<th data-formatter="runningFormatter">Index</th>
<th>Name</th>
<th>Surname</th>
<th>Job</th>
<th>Wage, €</th>
<th>bla, €</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>bla</td>
<td>blum</td>
<td>
<p class="btn" style="width:10%; padding-bottom:0; margin-
bottom:0; border-bottom:0"><span class="fa fa-edit"></span></p>
<p class="btn" style="width:10%; padding-bottom:0; margin-
bottom:0; border-bottom:0"><span class="fa fa-trash"></span></p>
</td>
</tr>
<tr>
<td></td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>bla</td>
<td>blum</td>
<td>
<p class="btn" style="width:10%; padding-bottom:0; margin-
bottom:0; border-bottom:0"><span class="fa fa-edit"></span></p>
<p class="btn" style="width:10%; padding-bottom:0; margin-
bottom:0; border-bottom:0"><span class="fa fa-trash"></span></p>
</td>
</tr>
</tbody>
</table>
If anyone know how index column could go like this 0001, it would be wonderful

Categories