Calculation in multiple Html tables on a single page - javascript

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>

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>

having trouble copying row to another

I have a main table that has clickable rows and another table for adding clicked row from main table.
Somehow, I was able to add row from one to another. But row is deleted from main table and then added to another. I want the clicked row to remain in main table then copied to the other.
I searched and tried like deep copy and shallow copy something but it doesn't work :(
Anyone know how to help?
Javascript:
<script>
$(document).ready(function($) {
$(".clickable-row").click(function() {
var row = document.createElement("tr");
row = Object.assign({}, $(this));
var tbody= document.getElementById("chosen");
tbody.appendChild(row[0]);
});
});
</script>
HTML for main table:
<div class="tableFixHead">
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody>
{% if quest_list %}
{% for quest in quest_list[:8] %}
<tr class="clickable-row">
<td>{{ quest.name }}</td>
<td>{{ quest.difficulty }}</td>
<td>{{ quest.goal }}</td>
<td>
{% for i in quest_map.query.filter(quest_map.quest_id == quest.id, quest_map.mod == 0).all() %}
{% for j in map_.query.filter(map_.id == i.map_id).all() %}
<p style="line-height: 1; font-size: 14px;">{{ j.name }}</p>
{% endfor %}
{% endfor %}
</td>
<td>
{% for i in quest_map.query.filter(quest_map.quest_id == quest.id, quest_map.mod == 1).all() %}
{% for j in map_.query.filter(map_.id == i.map_id).all() %}
<p style="line-height: 1; font-size: 14px;">{{ j.name }}</p>
{% endfor %}
{% endfor %}
</td>
</tr>
{% endfor %}
{% else %}
<p>error</p>
{% endif %}
</tbody>
</table>
</div>
Another table:
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody id="chosen">
<!--rows will be added here-->
</tbody>
</table>
You can use .clone() to clone your tr and then use .appendTo() to append tr to your tbody.
Demo Code :
$(document).ready(function($) {
$(".clickable-row").click(function() {
var cloned = $(this).clone() //clone tr
// $(cloned).attr('class','') //if you need to remove clickale clas from cloned tr
$(cloned).appendTo($("#chosen")) //append to chosen
});
});
<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/3.4.1/css/bootstrap.min.css">
<div class="tableFixHead">
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row">
<td>somwhtings2</td>
<td>medium</td>
<td>soemthing2..</td>
<td>
<p style="line-height: 1; font-size: 14px;">abc</p>
</td>
<td>
<p style="line-height: 1; font-size: 14px;">xyz</p>
</td>
</tr>
<tr class="clickable-row">
<td>somwhtings</td>
<td>medium</td>
<td>soemthing..</td>
<td>
<p style="line-height: 1; font-size: 14px;">abc</p>
</td>
<td>
<p style="line-height: 1; font-size: 14px;">xyz</p>
</td>
</tr>
</tbody>
</table>
</div>
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody id="chosen">
<!--rows will be added here-->
</tbody>
</table>
i think you can avoid using jquery entirely.
[...document.getElementsByClassName("clickable-row")].forEach(tr => {
tr.addEventListener("click", () => {
document.getElementById("chosen").innerHTML += "<tr>" + tr.innerHTML + "</tr>";
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row">
<td>name1</td>
<td>difficulty1</td>
<td>goal1</td>
<td>recommended1</td>
<td>return1</td>
</tr>
<tr class="clickable-row">
<td>name2</td>
<td>difficulty2</td>
<td>goal2</td>
<td>recommended2</td>
<td>return2</td>
</tr>
</tbody>
</table>
<br>
<table class="table table-bordered table-sm table-hover">
<thead>
<tr class="thead-light border">
<th>name</th>
<th>difficulty</th>
<th>goal</th>
<th>recommended</th>
<th>return</th>
</tr>
</thead>
<tbody id="chosen">
<!--rows will be added here-->
</tbody>
</table>

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>

problem with vue draggable width in table?

I'm using vuedraggable inside a Bulma table, but it creates a styling problem:
It's not a problem of the Bulma table. I used this in my own table, and the same issue occurs.
Here is my code:
<table class="table is-fullwidth is-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
</tr>
<draggable v-model="furds" :options="{group:'furds'}" #start="drag=true" #end="drag=false" #change="onChnage">
<tr class="dragndrop" v-for="featured in furds">
<td class="drag-icon"><i class="fa fa-arrows"></i></td>
<td>{{ featured.name }}</td>
<td>{{ featured.brand.name }}</td>
<td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
<td><a :href="`/manage/featured/${featured.id}`">View</a></td>
<td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
</tr>
</draggable>
</tbody>
</table>
Instead of wrapping tr with draggable,pass tbody as draggable element.
<draggable element="tbody" v-model="furds">
See the link for better understanding:
https://jsfiddle.net/dede89/L54yu3L9/ (Example with table) (found in vue draggable official doc)
[[Update: full code(based on question)]]
<table class="table is-fullwidth is-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</tfoot>
<draggable element="tbody" v-model="furds"> <!-- change here -->
<tr>
<td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
</tr>
<tr class="dragndrop" v-for="featured in furds">
<td class="drag-icon"><i class="fa fa-arrows"></i></td>
<td>{{ featured.name }}</td>
<td>{{ featured.brand.name }}</td>
<td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
<td><a :href="`/manage/featured/${featured.id}`">View</a></td>
<td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
</tr>
</draggable>
</table>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable
},
...
}
</script>
The styling issue occurs because vuedraggable uses a <div> as its root element by default, and that <div> (along with its contents) is stuffed into the first column of the table.
Solution: vuedraggable allows changing its root element with the tag property, so you could set it to tbody, replacing the existing <tbody> in the <table>:
<table>
<!-- FROM THIS: -->
<!--
<tbody> 👈
<draggable> 👈
<tr v-for="featured in furds">
...
</tr>
</draggable>
</tbody>
-->
<!-- TO THIS: -->
<draggable tag="tbody">
<tr v-for="featured in furds">
...
</tr>
</draggable>
<table>

jQuery reset a single table during onchange

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());

Categories