I have a table as follows. How to reset the table using jQuery to its original state during on change(with all th,tds). Not to reload the entire page because I have another tables also. I tried with dataTables but it adds search filters and paginations unnecessarily
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
<tbody>
<tr>
<th>Full</th>
<td id="fp" style="text-align:right">0</td>
<td id="fr" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="fpT">0.00</div>
</td>
</tr>
<tr>
<th >Fractional</th>
<td id="fr" style="text-align:right">0</td>
<td id="frN" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div id="frT" style="float:right">0.00</div>
</td>
</tr>
<tr>
<th >Premium</th>
<td id="pRate" style="text-align:right">0</td>
<td id="pNos" style="text-align:center">0%</td>
<td>
<div style="float:left">$</div>
<div id="pTotal" style="float:right">0.00</div>
</td>
</tr>
<tr class="active">
<th>Premium Discount</th>
<td style="text-align:right" id="premium-discount-rate">0</td>
<td style="text-align:center">
<select id="premium-disc-list">
<option value=""></option>
</select>
</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="premium-discount-total">0.00</div>
</td>
</tr>
</tbody>
</table>
jQuery
var table = $('#t01').dataTable();
//table.clear().draw();
//table.fnClearTable();
//table.fnDraw();
//table.fnDestroy();
//table.fnDraw();
I have 2 options in my mind:
1) You can mark all the elements that could be reset with some 'resetable' class and add data-original-val property, and once you decide to reset it do something like that:
$('.resetable','#t01').each(function(){
var originalVal = $(this).data('original-val');
$(this).html(originalVal);
})
2) Render another copy of the table inside type="text/html" script like this:
<script type="text/html" id="t01-original">
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
...
</table>
</script>
this way all the content of the script tag won't be parsed and you won't have duplicate id issues. On the reset simply replace the content of the table with the one from the script:
//t01-container is the id of div that wraps the table:
$( '#t01-container').html($('#t01-original').html());
Related
I have the following table on my page:
<section class="content">
<div class="box">
<div class="box-header with-border">
<div class="row margin-bottom-20">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-end">
<i class="fa fa-plus"> </i>New
</div>
</div>
</div>
</div>
<table class="table table-striped" id="QueryTable">
<thead>
<tr>
<th>Code: </th>
<th class="text-center">Name: </th>
<th class="text-center">Address: </th>
<th class="text-center">Phone: </th>
<th class="text-center">Options: </th>
</tr>
</thead>
<tbody>
<td>Code: </td>
<td class="text-center">Name: </td>
<td class="text-center">Address: </td>
<td class="text-center">Phone: </td>
<td class="text-center">Options: </td>
</tbody>
</table>
</section>
I need to insert rows and columns into this table via javascript. I tried something like:
$('#QueryTable').find('tr').each(function(){
$(this).find('th').eq(n).after('<th>Test </th>');
});
I also tried
$('#QueryTable tr').append('<th>Test</th>')
I also tried 02:
$('#QueryTable tr').each(function()
{
$(this).append('<th>Test</th>');
});
But these codes did not insert a row or column in my table. How do I add rows and columns by javascript (pure or jquery)?
Here is a simple example. I first fixed your table so that your cells are inside a row:
//adds the new column
$('#QueryTable thead tr').append('<th>Test</th>');
//adds a new cell to all existing rows (this assumes that the newly added column does not exist)
//at initialization
$('#QueryTable tbody tr').each(function() {
$(this).append('<td>New Cell</td>');
});
//Adds a new row
$('#QueryTable tbody').append('<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="QueryTable">
<thead>
<tr>
<th>Code: </th>
<th class="text-center">Name: </th>
<th class="text-center">Address: </th>
<th class="text-center">Phone: </th>
<th class="text-center">Options: </th>
</tr>
</thead>
<tbody>
<tr>
<td>Code: </td>
<td class="text-center">Name: </td>
<td class="text-center">Address: </td>
<td class="text-center">Phone: </td>
<td class="text-center">Options: </td>
</tr>
</tbody>
</table>
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>
Brief:
In Mobile Screen would like to Click on Column in Table 1 will Hide it and Slide to display a Column in Table 2 and I can Click on back button to return back to Column in Table 1 using Javascript/jQuery or it can been done with the help of CSS too. How i can do that and provide an example will be much of help too ?
Screenshot of current page:
https://ibb.co/51SRgKw
Current page structure:
<div class="panel-body blocking">
<div class="row">
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Class Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a style="font-weight: bold;color:#333" href="#">Actual Class Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Student Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a style="font-weight: bold;color:#333" href="#">Actual Student Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover" id="student_attendance">
<tbody>
<tr>
<th class="text-center">Absent Dates</th>
</tr>
<tr class="gradeX odd">
<td align="center">
<p class="text-left">
<strong>Actual Absent Dates List</strong>
</p>
<p class="text-left"></p>
</td>
</tr>
<tr>
<td>
<p class="text-left">
<input type="text">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
my idea with jquery i will use .hide() and .show() to switch your div, first load set style is display:none.
or use jquery mobile.
$(function(){
let switch_page = function(p_id){
$('.manage-at__scroll').hide(200)
$(`#${p_id}`).show(200);
}
$('a.list-class').on('click', function(e){
e.preventDefault();
switch_page('tab2');
});
$('a.list-st').on('click', function(e){
e.preventDefault();
switch_page('tab3');
});
$('#b1').on('click', function(e){
e.preventDefault();
switch_page('tab1');
});
$('#b2').on('click', function(e){
e.preventDefault();
switch_page('tab2');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body class="container">
<div class="panel-body blocking">
<div class="row">
<div class="col-lg-4 manage-at__scroll" style="padding:0px;" id="tab1">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Class Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a class="list-class" style="font-weight: bold;color:#333" href="#">Actual Class Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab2">
<p>
<a class="btn btn-default" href="#" id="b1"> back </a>
</p>
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Student Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a class="list-st" style="font-weight: bold;color:#333" href="#">Actual Student Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab3">
<p>
<a class="btn btn-default" href="#" id="b2"> back </a>
</p>
<table class="table table-striped table-bordered table-hover" id="student_attendance">
<tbody>
<tr>
<th class="text-center">Absent Dates</th>
</tr>
<tr class="gradeX odd">
<td align="center">
<p class="text-left">
<strong>Actual Absent Dates List</strong>
</p>
<p class="text-left"></p>
</td>
</tr>
<tr>
<td>
<p class="text-left">
<input type="text">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
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>
i have a basic html table with some data displayed, what i want is when i click on specific row the value of incident Id cell is passed to the hidden variable value i have developed this part, what i don't know how can i put hidden variable value in the session for other functionality purposes.
my table
<div id="tab1" class="tab active">
<table class="table table-striped">
<thead style="background-color: #F0F1F2">
<tr>
<th>Incident Id</th>
<th>Party Name</th>
<th>Max Rank</th>
<th>Incident Description</th>
</tr>
</thead>
<tbody>
<c:forEach items="${incidents}" var="incident">
<tr id="tr" onclick="changeIncidentValue(${incident.incidentId})">
<td>${incident.incidentId}</td>
<td>xxx</td>
<td>${incident.partyNameMaxRank}</td>
<td>${incident.incidentDesc}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<input type="hidden" id="incidentId" name="incidentId" value=""/>
js function
<script>
function changeIncidentValue(incidentId){
$('#incidentId').val(incidentId);
var x = $('#incidentId').val();
console.log(x);
}
</script>