We Keep Coding

how to sort table column using select tag <select>?

i'm trying to sort the columns in the table . i was able to sort the table column by clicking on the table header ( using this $('th').click(function(){ ) but i want to sort the table column using the select options but i was unable to do so .
i'm using a class sort-item in the select option and then and using that sort-item class in the jquery but it is not working ...
can you please help me out ?
$('sort-item').click(function(){
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
this.asc = !this.asc
if (!this.asc){rows = rows.reverse()}
for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group ">
<div class="sort">Sort : </div>
<select class="sort">
<option value="0">All</option>
<option class="sort-item" value="1">Received</option>
<option class="sort-item" value="2">Due</option>
</select>
</div>
<div class="table zui-wrapper table-responsive " >
<div class="zui-scroller ">
<table id="indextable"
class="zui-table table "
>
<thead>
<tr>
<th scope="col" class="zui-sticky-col">Name</th>
<th scope="col">id</th>
<th scope="col">Complexity</th>
<th scope="col">Received</th>
<th scope="col">Language</th>
<th scope="col">Status</th>
<th scope="col" class="float-right">Due </th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">
<a>
A</a>
</td>
<td><a>123456789</a></td>
<td><a>Medium</a></td>
<td><a>01/01/20</a></td>
<td><a>French</a></td>
<td><a>Designed By A</a>
</td>
<td ><a>1/05/20</a>
</td>
</tr>
<tr>
<td class=" zui-sticky-col">
<a >B</a>
</td>
<td><a>12345678</a></td>
<td><a>Medium</a></td>
<td><a>02/05/20</a></td>
<td><a>French</a></td>
<td><a>Designed By j</a></td>
<td>
<a>2/05/20</a>
</td>
</tr>
<tr>
<td class="zui-sticky-col">
<a>C</a>
</td>
<td><a>1234567</a></td>
<td><a>Medium</a></td>
<td><a>02/02/20</a></td>
<td><a>French</a></td>
<td><a>Designed By j</a></td>
<td>
<a> 12/05/20</a>
</td>
</tr>
<tr>
<td class=" zui-sticky-col">
<a>D</a>
</td>
<td><a>123456</a></td>
<td><a>Medium</a></td>
<td><a>03/03/20</a></td>
<td><a>French</a></td>
<td><a>Designed by G</a></td>
<td>
<a>12/05/20</a>
</td>
</tr>
<tr>
<td class=" zui-sticky-col ">
<a>E</a>
</td>
<td><a >12345</a></td>
<td><a >Medium</a></td>
<td><a>04/04/20</a></td>
<td><a>French</a></td>
<td><a>Designed by E</a></td>
<td>
<a>12/05/20</a>
</td>
</tr>
<tr>
<td class=" zui-sticky-col ">
<a>F</a>
</td>
<td><a>1234</a></td>
<td><a>Medium</a></td>
<td><a>05/05/20</a></td>
<td><a>French</a></td>
<td><a >Designed by F</a></td>
<td >
<a> 12/05/20</a>
</td>
</tr>
<tr>
<td class="zui-sticky-col">
<a >G</a>
</td>
<td><a>123</a></td>
<td><a>Medium</a></td>
<td><a>06/06/20</a></td>
<td><a>French</a></td>
<td><a>Designed by D</a></td>
<td>
<a>12/05/20</a>
</td>
</tr>
<tr>
<td class="zui-sticky-col ">
<a>H</a>
</td>
<td><a >12</a></td>
<td><a >Medium</a></td>
<td><a >07/07/20</a></td>
<td><a>French</a></td>
<td><a>Designed by B</a></td>
<td >
<a> 12/05/20</a>
</td>
</tr>
<tr>
<td class="zui-sticky-col">
<a >I</a>
</td>
<td><a >1</a></td>
<td><a >Medium</a></td>
<td><a >08/08/20</a></td>
<td><a >French</a></td>
<td><a >Designed by C</a></td>
<td style="float: right">
<a>12/05/20</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Is this possible to use
$(".sort").change(function (){
});

How to colspan tr table from the start of the table

i want to start the colspan from the second column i mean from the name:
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td><p>Name</p></td>
<td><p>ID</p></td>
<td><p>GPS date</p></td>
<td><p>Adresse</p></td>
<td><p>Company</p></td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td><p>{{device.name}}</p></td>
<td><p>{{device.uniqueid}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
</tbody>
please can anyone tell me how i can colspan from the name??

It seems all you need is to add a <td> to the row. You have :
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
Change it to:
<tr ng-if="device.expanded" ng-repeat-end="">
<td style="width: 30px;"></td>
<td colspan="5">gfhgfjhfjtjrtkjy</td>
</tr>
This should add a <td> beneath the plus/minus icon. Additionally, you can style this <td> if you do not intent it to be appear as a column ( which I think is your intent).
Hope that helps.

<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td><p>Name</p></td>
<td><p>ID</p></td>
<td><p>GPS date</p></td>
<td><p>Adresse</p></td>
<td><p>Company</p></td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td><p>{{device.name}}</p></td>
<td><p>{{device.uniqueid}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td colspan="2" align="center"><p>{{device.name}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>

data-maintain-selected="true" not working

<table id="table-manage-data-import-conflicts" data-classes="table table-hover table-condensed" data-cache="false" data-pagination="true" data-page-size="50" data-search="true" data-click-to-select="true" data-maintain-selected="true">
<thead>
<tr>
<th data-field="id" data-visible="false"></th>
<th data-field="recommendationPlacements" data-visible="false"></th>
<th data-field="rules" data-visible="false"></th>
<th data-field="isSelected" data-checkbox="true" data-formatter="BusinessPortal.Manage.DataImportConflicts.formatTableCheckBoxColumn"></th>
<th data-field="name" data-switchable="false" data-sortable="true">Name</th>
<th data-field="description" data-switchable="false" data-formatter="BusinessPortal.Manage.DataImportConflicts.formatTableDescriptionColumn" data-events="BusinessPortal.Manage.DataImportConflicts.handleTableDescriptionColumnEvents">Description</th>
</tr>
</thead>
</table>
I'm using bootstrap version 1.9.1. I want to keep the checked items with pagination
data-maintain-selected="true".
But it won't work. Can someone please help out with this?

isn't this related to pagination server/client side?
i don't know if it helps you but, bellow is my code and is working with data-maintain-selected:"true"
<table id="example"
data-toggle="table"
data-search="true"
data-filter-control="true"
data-sort-name="Glider"
data-show-refresh="true"
data-sort-order="asc"
data-show-export="true"
data-click-to-select="true"
data-maintain-selected="true"
data-show-toggle="true"
data-show-columns="true"
data-pagination="true"
data-filter-control="true"
cellspacing="0">
<thead>
<tr>
<th data-field="1" data-field="state" data-checkbox="true"></th>
<th data-field="Glider" data-filter-control="input" data-sortable="true">Glider</th>
<th data-sortable="true" data-align="center" data-valign="middle" data-toggle="tooltip" data-placement="bottom" >A dist<i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="Average distance for all the flights made with the selected glider"></i></th>
<th data-sortable="true">Pilots</th>
</tr>
</thead>
<tbody>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name1</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name2</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name3</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name3</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name4</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name4</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name5</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name5</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name6</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name11221</td>
<td> 1</b></td>
<td> 2</td>
</tr>
<tr class="Collapse">
<td class="bs-checkbox "><input data-index="1" type="checkbox"></td>
<td> Name111</td>
<td> 1</b></td>
<td> 2</td>
</tr>
</tbody>
</table>

Detect if end digit is 1-4 or 5-9 then style `this` table row

Firstly here is my table structure
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table group-9569" width="100%">
<tbody>
<tr>
<td class="order_id" width="10%"><span class="orderId">9569</span></td>
<td class="order_date" width="13%">
<span >2016-04-14 17:39:00</span>
</td>
<td class="order_name" width="10%"><span >John Smith</span></td>
<td class="order_paid" width="5%">
<span class="total-cost-9569">￥81.28</span>
</td>
<td class="order_shipping" width="13%">Shipping</td>
<td class="order_status" width="10%">
<span class="order-status-9569">Paid</span>
</td>
<td class="order_tracking" width="10%"></td>
<td class="new-msg-img-9569">
</td>
</tr>
</tbody>
</table>
<table class="table group-9564" width="100%">
<tbody>
<tr>
<td class="order_id" width="10%"><span class="orderId">9564</span></td>
<td class="order_date" width="13%">
<span >2016-04-14 17:24:10</span>
</td>
<td class="order_name" width="10%"><span >Jane smith</span></td>
<td class="order_paid" width="5%">
<span class="total-cost-9568">￥109.69</span>
</td>
<td class="order_shipping" width="13%">Shipping</td>
<td class="order_status" width="10%">
<span class="order-status-9568">Paid</span>
</td>
<td class="order_tracking" width="10%"></td>
<td class="new-msg-img-9568">
</td>
</tr>
</tbody>
</table>
My orderId increments by one every order what I want to achieve is target the number with jquery to only detect the last number and then detect if 0-4 else 5-9 number range then style this row red or green accordingly.
I know can convert it to a javascript number like so but I'm wondering if its just making things more complicated by turning it into a digit.
var number = parseInt($('.orderId').text(), 10);
alert(number)
the problem is that will get every order when I just need them one by one per row.
What would be the best way of going about this problem and how do I differentiate each row independently to style by end digit?

Just partition the list of elements, for example:
var
// all candidates
$all = $('.orderId'),
// first set
$_04 = $all.filter(function (i, el) {
// check criteria
return -1 < ['0', '1', '2', '3', '4'].indexOf(el.innerText.substr(-1))
}),
// all except first set
$_59 = $all.not($_04)
;
// do stuff with both sets
$_04.closest('tr').css('background', 'red');
$_59.closest('tr').css('background', 'green');
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
<table class="table group-9569" width="100%">
<tbody>
<tr>
<td class="order_id" width="10%"><span class="orderId">9569</span></td>
<td class="order_date" width="13%">
<span >2016-04-14 17:39:00</span>
</td>
<td class="order_name" width="10%"><span >John Smith</span></td>
<td class="order_paid" width="5%">
<span class="total-cost-9569">￥81.28</span>
</td>
<td class="order_shipping" width="13%">Shipping</td>
<td class="order_status" width="10%">
<span class="order-status-9569">Paid</span>
</td>
<td class="order_tracking" width="10%"></td>
<td class="new-msg-img-9569">
</td>
</tr>
</tbody>
</table>
<table class="table group-9564" width="100%">
<tbody>
<tr>
<td class="order_id" width="10%"><span class="orderId">9564</span></td>
<td class="order_date" width="13%">
<span >2016-04-14 17:24:10</span>
</td>
<td class="order_name" width="10%"><span >Jane smith</span></td>
<td class="order_paid" width="5%">
<span class="total-cost-9568">￥109.69</span>
</td>
<td class="order_shipping" width="13%">Shipping</td>
<td class="order_status" width="10%">
<span class="order-status-9568">Paid</span>
</td>
<td class="order_tracking" width="10%"></td>
<td class="new-msg-img-9568">
</td>
</tr>
</tbody>
</table>
Or:
$('.orderId').each(function (i, el) {
$(el).closest('tr').css('background', -1 < ['0', '1', '2', '3', '4'].indexOf(el.innerText.substr(-1))
? 'red'
: 'green'
);
});
If you don't need the sets later on.

You can use regex /[\d]{1}$/ to fetch the last digit of orderid,
var elements = document.getElementsByClassName("orderId");
var regex = new RegExp(/[\d]{1}$/);
for(var i=0; i<elements.length; i++) {
var number = element[i].innerHTML;
var match = regex.exec(number);
element.setAttribute('class','class'+match[0]);
alert('Last digit is: ' + match[0]);
}
You've to define different css classes for each number and name accordingly, i used class1 etc.

If you modify HTML structure a bit, you could also achieve the result with pure CSS, using attribute selector, more specifically [attribute$="value"], that selects elements that end with the value. You would need to add an attribute, that describes the order-id to <tr> elements - because you cannot style whole <tr> by selecting child element - <td>. You could also add order-id in class attribute, but that could break things, if those <tr> have multiple classes.
For this html:
<table class="table" width="100%">
<tbody>
<tr data-order-id="9569">
<td class="order_id" width="10%"><span class="orderId">9569</span></td>
<td class="order_date" width="13%">
<span >2016-04-14 17:39:00</span>
</td>
<td class="order_name" width="10%"><span >John Smith</span></td>
<td class="order_paid" width="5%">
<span class="total-cost-9569">￥81.28</span>
</td>
<td class="order_shipping" width="13%">Shipping</td>
<td class="order_status" width="10%">
<span class="order-status-9569">Paid</span>
</td>
<td class="order_tracking" width="10%"></td>
<td class="new-msg-img-9569">
</td>
</tr>
<tr data-order-id="9564">
<td class="order_id" width="10%"><span class="orderId">9564</span></td>
<td class="order_date" width="13%">
<span >2016-04-14 17:24:10</span>
</td>
<td class="order_name" width="10%"><span >Jane smith</span></td>
<td class="order_paid" width="5%">
<span class="total-cost-9568">￥109.69</span>
</td>
<td class="order_shipping" width="13%">Shipping</td>
<td class="order_status" width="10%">
<span class="order-status-9568">Paid</span>
</td>
<td class="order_tracking" width="10%"></td>
<td class="new-msg-img-9568">
</td>
</tr>
</tbody>
</table>
And these css rules
tr[data-order-id$="0"],tr[data-order-id$="1"],tr[data-order-id$="2"],tr[data-order-id$="3"],tr[data-order-id$="4"] {
background-color: red;
}
tr[data-order-id$="5"],tr[data-order-id$="6"],tr[data-order-id$="7"],tr[data-order-id$="8"],tr[data-order-id$="9"] {
background-color: green;
}
https://jsfiddle.net/j8ngo7kh/

Generating PDF from complex html table using JSPDF

I am trying to generate pdf from html using JSPDF and html having one complex table, Added image below.
You can see in this Fiddle, What i tried so far.
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins);
Problem is, when i try to generate pdf i am getting
Uncaught TypeError: Cannot read property 'name' of undefined
Is it possible to use JSPDF for this kind of complex table or will it only work for a simple table.
EDIT:
Solved this by different way, This is what i did
I converted HTML Table into Canvas html2canvas.js
You can get canvas as Base64 image using canvas.toDataURL("image/jpeg")
Once i got Base64 image, Created empty PDF using JSPDF and using addImage feature of JSPDF, i manage to embed Base64 image inside PDF.
If you need charts and images as part of PDF -> charts and images as part of PDF
Credit goes to my brain.

I was able to fix this by modifying line 6203 of jspdf.debug.js (on version 1.2.61) to this:
while (j < tableRow.cells.length && headers[j] != undefined) {
Which was originally:
while (j < tableRow.cells.length) {
Alternatively, I could make it go away by adding another td to the tr it was processing (it only had one td, which apparently caused the problem).
I'm thinking I'll try to submit it as a bug fix.

Checkout the pdfmake Playground (It is supposed to work in the browser and is MIT-licensed.)
Select TABLES in the top menu of the Playground.
Scroll down the example pdf, there is a section illustrating Colspan-capabilities.

I stepped through the code using the chrome debugger, and it looks like jspdf is is having an issue with colspan in the first row of the table.
It seems like a bug in their library, where you can't use col span in the header or first row of each table.

Remove All the colspan Attribute And Rowspan Attribute From td Tag And Apply blank td then try.
Its Working and Generate Pdf (for checking put this code in your file)
<div id="inspectionReport">
<div class="title">
<p class="appname">Title</p>
<p>REPORT</p>
</div>
<p class="date">Revised on 9/3/2013</p>
<p style="float:right;">
<button onclick="javascript:demoFromHTML();">Generate Pdf</button>
</p>
<table style="width:100%">
<tbody>
<tr>
<td>A No : <span id="a">1</span>
</td>
<td>B / No : <span id="b">2</span>
</td>
<td>C Date: <span id="c"></span>
</td>
</tr>
<tr>
<td>A No : <span id="d">3</span>
</td>
<td>B name: <span id="e">4</span>
</td>
<td>
<p>C [ X ] D [ ]</p>
<p>G Date : <span id="f"></span>
</p>
</td>
</tr>
<tr>
<td>O No : <span id="yy"></span>
</td>
<td>Orgin : <span id="yyr"></span>
</td>
<td>S : [ X ] G [ ] J [ X ] Y [ X ] G</td>
</tr>
<tr>
<td></td>
<td>Name : <span id="QW"></span>
</td>
<td>xc : <span id="FG"></span>
</td>
</tr>
<tr>
<td>No : <span id="gg"></span>
</td>
<td>company : <span id="gg"></span>
</td>
<td>type t [ ] A [ X ] No</td>
</tr>
<tr>
<td>Quen : <span id="odrQuan"></span>
</td>
<td>Sh : <span id="shipQuan"></span>
</td>
<td>Run [ ] Int [ X ]. Shi [ ] No.</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td >Title:</td>
</tr>
<tr align="center">
<td>FY</td>
<td>CJK</td>
<td>SL</td>
<td>F</td>
<td>P</td>
</tr>
<tr align="center">
<td><span id="fyavail">20</span>
</td>
<td><span id="ck">40</span>
</td>
<td><span id="sl">70</span>
</td>
<td><span id="finish">100</span>
</td>
<td><span id="pack">50</span>
</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody id="dhtml">
<tr>
<td class="boldFont">SAPC:</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="boldFont">
<td>ATU: <span id="aqluser"></span>
</td>
<td>SS : <span id="sampleSize"></span>
</td>
<td></td>
<td >MA : <span id="majallowed"></span>
</td>
<td></td>
<td>MAS : <span id="minallowed"></span>
</td>
</tr>
<tr>
<td>DT</td>
<td align="center">No.</td>
<td>DD</td>
<td align="center">C</td>
<td align="center">Max</td>
<td align="center">Min</td>
</tr>
<tr>
<td >FY</td>
<td align="center">1</td>
<td>FY</td>
<td align="center">11</td>
<td align="center">12</td>
<td align="center">123</td>
</tr>
<tr>
<td></td>
<td align="center">2</td>
<td>FY</td>
<td align="center">11</td>
<td align="center">12</td>
<td align="center">123</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right">ST :</td>
<td align="center">22</td>
<td align="center">24</td>
<td align="center">246</td>
</tr>
<tr>
<td >SKL</td>
<td align="center">1</td>
<td>SKL</td>
<td align="center">14</td>
<td align="center">13</td>
<td align="center">234</td>
</tr>
<tr>
<td align="center">2</td>
<td>SKL</td>
<td align="center">14</td>
<td align="center">13</td>
<td align="center">234</td>
<td></td>
</tr>
<tr>
<td align="right">ST :</td>
<td></td>
<td></td>
<td align="center">28</td>
<td align="center">26</td>
<td align="center">468</td>
</tr>
<tr>
<td >A</td>
<td align="center">1</td>
<td>A</td>
<td align="center">33</td>
<td align="center">445</td>
<td align="center">33</td>
</tr>
<tr>
<td></td>
<td align="center">2</td>
<td>A</td>
<td align="center">33</td>
<td align="center">445</td>
<td align="center">33</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right">ST :</td>
<td align="center">66</td>
<td align="center">890</td>
<td align="center">66</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="right" class="boldFont">Tot :</td>
<td align="center">116</td>
<td align="center">940</td>
<td align="center">780</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tr class="boldFont">
<td >Title 3</td>
<td align="center">ASD</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="boldFont">
<td>C : <span id="tolcartons"></span>
</td>
<td>S : <span id="samsize"></span>
</td>
<td>M : <span id="allowmajor"></span>
</td>
<td align="center">WPZ</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>D No.</td>
<td>D type</td>
<td>NOF</td>
<td>C</td>
<td>Spev</td>
<td>Act</td>
<td>diff</td>
</tr>
<tr>
<td>1</td>
<td>F/Y</td>
<td><span id="nooffy"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>S/K/L</td>
<td><span id="skl"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>Fin</td>
<td><span id="finl"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">TM:</td>
<td><span id="totmajores"></span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td >Comment:<span id="comment"></span>
</td>
</tr>
</table>
<table style="width:100%">
<tbody>
<tr>
<td >outcome</td>
<td>A. V</td>
<td>[ X ] P</td>
<td>[ ] F</td>
<td>[ ] W</td>
<td>[ ] NA</td>
</tr>
<tr>
<td></td>
<td>B. M</td>
<td>[ X ] P</td>
<td>[ ] F</td>
<td>[ ] W</td>
<td>[ ] NA</td>
</tr>
<tr>
<td></td>
<td>C. P</td>
<td>[ X ] P</td>
<td>[ ] F</td>
<td>[ ] W</td>
<td>[ ] NA</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr class="boldFont">
<td>CC A s</td>
</tr>
<tr>
<td><span id="comcorraction"></span>
</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr class="boldFont">
<td >Title 4 :</td>
<td></td>
</tr>
<tr>
<td>TWT [ X ] Pass [ ] Fail</td>
<td>STO [ ] Pass [ X ] Fail</td>
</tr>
<tr>
<td>PAS [ ] A [ X ] NA</td>
<td>SR [ ] Yes [ X ] No [ ] NA</td>
</tr>
</tbody>
</table>
<table style="width:100%">
<tbody>
<tr class="boldFont">
<td >Signatures:</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p><span id="qaauditNo">.</span> <span id="qaadate" class="sdate">.</span>
</p>
<p>QANo <span class="sdate">Date</span>
</p>
</td>
<td>
<p><span id="mp">.</span> <span id="mpdate" class="sdate">.</span>
</p>
<p>MP<span class="sdate">Date</span>
</p>
</td>
<td>
<p><span id="supr">.</span> <span id="supdate" class="sdate">.</span>
</p>
<p>Sup<span class="sdate">Date</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<p class="boldFont">Note: ABCDEFG</p>
<p class="boldFont">Note: ABCDEFG</p>
<div class="title boldFont">QC / MED / FAC / FOR</div>