Hi I want to Export html to pdf, I have use jsPDF all are working pdf also exporting but i want to get same html in pdf, html styles are not working what can I do for that can anyone help me please? Is their are any way to use html styles in jsPDF?? This is my html code. I got a script function from this link http://jsfiddle.net/xzZ7n/1/
<div class="panel col-xs-12 col-sm-12 col-md-11" style="" id="quotation">
<header><img src="~/images/doc/header_footer/TOUR_Header.png" width="600" /></header>
<table width="600" border="0" style="font-size:12px;border:none;" ng-repeat="endetails in enquiryQuote" id="enq_details">
<tr>
<td><b>Enquiry Date</b></td>
<td>{{endetails.system_date_time | date:fullDate}}</td>
<td><b>Enquiry ref.</b></td>
<td>{{endetails.reference_no}}</td>
</tr>
<tr>
<td><b>Dep. date</b></td>
<td>{{endetails.departing_date | date:fullDate}}</td>
<td><b>Depart. from</b></td>
<td>{{endetails.departing_from}}</td>
</tr>
<tr>
<td><b>Ret. date</b></td>
<td>{{endetails.returning_date | date:fullDate}}</td>
<td><b>Travel. to</b></td>
<td>{{endetails.travelling_to}}</td>
</tr>
<tr>
<td><b>Customer</b></td>
<td>{{endetails.name}}</td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="300" border="0" style="font-size:12px;border:none;" ng-repeat="total in invoice_total">
<tr>
<td><b>Total Price</b></td>
<td>{{total.total_amount}}</td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product in invheader[0].invoice_hotel">
<tr>
<td><font color="red;">Hotel Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Hotel name</b></td>
<td style="width:300px;">{{product.hotel_name}}</td>
<td style="width:150px;"><b>No of rooms</b></td>
<td style="width:300px;">{{product.no_of_rooms}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Location</b></td>
<td style="width:300px;">{{product.city_code}}</td>
<td style="width:150px;">Room view</td>
<td style="width:300px;">{{product.product_hotel_room_views.roomview_name}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Checkin</b></td>
<td style="width:300px;">{{product.check_in| date:fullDate}}</td>
<td style="width:150px;">Room type</td>
<td style="width:300px;">{{product.product_hotel_room_types.room_type_name}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Checkout</b></td>
<td style="width:300px;">{{product.check_out| date:fullDate}}</td>
<td style="width:150px;">Board basis</td>
<td style="width:300px;">{{product.product_hotel_board_basis.bb_name}}</td>
</tr>
<tr>
<td style="width:150px;"><b>No of nights</b></td>
<td style="width:300px;"> </td>
<td style="width:150px;"> </td>
<td style="width:300px;"> </td>
</tr>
<tr>
<td colspan="4">
<b>Passengers - Rooms</b>
<div ng-repeat="item in product.product_hotel_room"><b>Adult :</b> {{item.adults}} and <b>Child :</b> {{item.child}}</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b></td>
<td>{{product.payable}}</td>
<td><b>Rate</b></td>
<td>{{product.rate}}</td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_flight in invheader[0].invoice_flight">
<tr>
<td><font color="red;">Flight Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Depatur City</b></td>
<td style="width:300px;">{{product_flight.departure_city}}</td>
<td style="width:150px;"><b>Arrival City</b></td>
<td style="width:300px;">{{product_flight.arrival_city}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Depature date</b></td>
<td style="width:300px;">{{product_flight.depature_date | date:fullDate}}</td>
<td style="width:150px;"><b>Arrival Date</b></td>
<td style="width:300px;">{{product_flight.arrival_date | date:fullDate}}</td>
</tr>
<tr>
<td colspan="4">
<b>Passengers</b>
<br />
<div ng-repeat="item_flight_pass in product_flight.invoice_flight_passengers"><b>Name :</b>{{item_flight_pass.title}}.{{item_flight_pass.first_name}} {{item_flight_pass.last_name}} </div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_flight.budget}}</td>
<td><b>Total</b> {{product_flight.total_sell_amt}} </td>
<td><b>Commision</b> {{product_flight.commission_on}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_car in invheader[0].invoice_car">
<tr>
<td><font color="red;">Car Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width: 178px;"><b>Pick Up</b></td>
<td style="width:300px;">{{product_car.pickup}}</td>
<td style="width: 178px;"><b>Drop off</b></td>
<td style="width:300px;">{{product_car.dropoff}}</td>
</tr>
<tr>
<td style="width: 178px;"><b>Pick Up date</b></td>
<td style="width:300px;">{{product_car.datein | date:fullDate}}</td>
<td style="width: 178px;"><b>Drop off Date</b></td>
<td style="width:300px;">{{product_car.dateout | date:fullDate}}</td>
</tr>
<tr>
<td style="width: 178px;"><b>Pick Up Time</b></td>
<td style="width:300px;">{{product_car.timein | date:fullDate}}</td>
<td style="width: 180px;"><b>Drop off Time</b></td>
<td style="width:300px;">{{product_car.timeout | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Car Type</b></td>
<td style="width:300px;">{{product_car.type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_car.payable}}</td>
<td><b>Total</b> {{product_car.buyamount}}</td>
<td><b>Commision</b> {{product_car.commissionon}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_tour in invheader[0].invoice_tour">
<tr>
<td><font color="red;">Tour Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Tour Details</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Pick Up</b></td>
<td style="width:300px;">{{product_tour.pick_up}}</td>
<td style="width:150px;"><b>Drop off</b></td>
<td style="width:300px;">{{product_tour.drop_off}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Pick Up date</b></td>
<td style="width:300px;">{{product_tour.departure_date | date:fullDate}}</td>
<td style="width:165px;"><b>Drop off Date</b></td>
<td style="width:300px;">{{product_tour.dateout | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Pick Up Time</b></td>
<td style="width:300px;">{{product_tour.timein | date:fullDate}}</td>
<td style="width:165px;"><b>Drop off Time</b></td>
<td style="width:300px;">{{product_tour.timeout | date:fullDate}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_tour.payable}}</td>
<td><b>Total</b> {{product_tour.buyamount}}</td>
<td><b>Commision</b> {{product_tour.commissionon}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_rail in invheader[0].invoice_rail">
<tr>
<td><font color="red;">Rail Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Departure</b></td>
<td style="width:300px;">{{product_rail.departurecity}}</td>
<td style="width:150px;"><b>Arrival</b></td>
<td style="width:300px;">{{product_rail.arrivalcity}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Type</b></td>
<td style="width:300px;">{{product_rail.type}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_rail.budget}}</td>
<td><b>Total</b> {{product_rail.amount}}</td>
<td style="width:165px;"><b>Quote Price</b> {{product_rail.quote_price}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_transfer in invheader[0].invoice_transfers">
<tr>
<td><font color="red;">Transfers Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>From City</b></td>
<td style="width:300px;">{{product_transfer.from_city}}</td>
<td style="width:150px;"><b>To City</b></td>
<td style="width:300px;">{{product_transfer.to_city}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Vehicle Type</b></td>
<td style="width:300px;">{{product_transfer.vehicle_type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_transfer.budget}}</td>
<td><b>Buy Amount</b> {{product_transfer.amount}}</td>
<td style="width:165px;"><b>Payable</b> {{product_transfer.payable}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_cruise in invheader[0].invoice_cruise">
<tr>
<td><font color="red;">Cruise Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Departure City</b></td>
<td style="width:300px;">{{product_cruise.departure_city}}</td>
<td style="width:150px;"><b>Arrival City</b></td>
<td style="width:300px;">{{product_cruise.arrival_city}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Type</b></td>
<td style="width:300px;">{{product_cruise.vehicle_type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:165px;"><b>Departure date</b></td>
<td style="width:300px;">{{product_cruise.departure_date | date:fullDate}}</td>
<td style="width:165px;"><b>Arrival Date</b></td>
<td style="width:300px;">{{product_cruise.arrival_date | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Depature Time</b></td>
<td style="width:300px;">{{product_cruise.departure_time | date:fullDate}}</td>
<td style="width:165px;"><b>Arivalo Time</b></td>
<td style="width:300px;">{{product_cruise.arrival_time | date:fullDate}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_cruise.budget}}</td>
<td><b>Amount</b> {{product_cruise.amount}}</td>
<td style="width:165px;"><b>Commistion Amount</b> {{product_cruise.commission_amount}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_insurance in invheader[0].invoice_insurance">
<tr>
<td><font color="red;">Insurance Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Departure City</b></td>
<td style="width:300px;">{{product_insurance.departure_city}}</td>
<td style="width:150px;"><b>Arrival City</b></td>
<td style="width:300px;">{{product_insurance.arrival_city}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Type</b></td>
<td style="width:300px;">{{product_insurance.vehicle_type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:165px;"><b>Departure date</b></td>
<td style="width:300px;">{{product_insurance.departure_date | date:fullDate}}</td>
<td style="width:165px;"><b>Arrival Date</b></td>
<td style="width:300px;">{{product_insurance.arrival_date | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Depature Time</b></td>
<td style="width:300px;">{{product_insurance.departure_time | date:fullDate}}</td>
<td style="width:165px;"><b>Arivalo Time</b></td>
<td style="width:300px;">{{product_insurance.arrival_time | date:fullDate}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_insurance.budget}}</td>
<td><b>Amount</b> {{product_insurance.amount}}</td>
<td style="width:165px;"><b>Commistion Amount</b> {{product_insurance.commission_amount}}</td>
<td> </td>
</tr>
</table>
<footer><img src="~/images/doc/header_footer/TOUR_Footer.png" width="600" /></footer>
</div>
<div class="rightpan" id='printablediv'>
<p>Print Content</p>
<input type='button' id="cmd" value="Download" class="button1 sbtbutton" />
<div>
<div style="display: none;" id="editor"></div>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
var element = $("#printablediv"); // global variable
var getCanvas; // global variable
$("#cmd").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#editor").append(canvas);
getCanvas = canvas;
var img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Vistordetails.pdf');
form.width(cache_width);
}
});
});
Late Answer!!
Use Html2Canvas plugin to convert a div to canvas
next add the canvas image to JsPDF doc
Related
with javascript, i am trying to get rid of all the dates and only keeping the time from all my rows of the table
here is the screenshot i am taking about
i cannot use the id or class of the td because its dynamic.
i am trying to ynderstand how can i loop it over to make it work
here is my piece of code i have
var header = document.getElementsByClassName('flightData1')[0];
var dateField = ?
also trying to add some condition here that if the records are not in todays date, remove those rows
here is my html
<table border="0" cellpadding="0" id="iFlightTable" class="cellpadding3 styled-table">
<tbody>
<tr class="flightData1" id="AS 2224_2023-02-09T21:17:00_Anchorage_row">
<td id="Alaska Air"> Alaska</td>
<td> 2224</td>
<td> Anchorage</td>
<td id="1676006220000"> 9:17P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 2224_2023-02-09T21:17:00_bags"> </td>
<td id="AS 2224_2023-02-09T21:17:00_gate">2A</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="flightData2" id="AS 657_2023-02-09T16:35:00_Las Vegas_row">
<td id="Alaska Air"> Alaska</td>
<td> 657</td>
<td> Las Vegas</td>
<td id="1675989300000"> 4:35P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 657_2023-02-09T16:35:00_bags"> </td>
<td id="AS 657_2023-02-09T16:35:00_gate">1</td>
<td> </td>
<td> </td>
<td> </td>
</tr> </tbody>
</table>
let dateFields = document.querySelectorAll('#iFlightTable tr td:nth-child(4)');
dateFields.forEach( field => {
field.innerText = field.innerText.split(/\s/)[0];
});
<table border="0" cellpadding="0" id="iFlightTable" class="cellpadding3 styled-table">
<tbody>
<tr class="flightData1" id="AS 2224_2023-02-09T21:17:00_Anchorage_row">
<td id="Alaska Air"> Alaska</td>
<td> 2224</td>
<td> Anchorage</td>
<td id="1676006220000"> 9:17P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 2224_2023-02-09T21:17:00_bags"> </td>
<td id="AS 2224_2023-02-09T21:17:00_gate">2A</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="flightData2" id="AS 657_2023-02-09T16:35:00_Las Vegas_row">
<td id="Alaska Air"> Alaska</td>
<td> 657</td>
<td> Las Vegas</td>
<td id="1675989300000"> 4:35P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 657_2023-02-09T16:35:00_bags"> </td>
<td id="AS 657_2023-02-09T16:35:00_gate">1</td>
<td> </td>
<td> </td>
<td> </td>
</tr> </tbody>
Hi I am working on handling two tables one with table has table head and another table has table body.Need help in fixed table head and two table content with proper alignment.while fixing the header i could not align the table content subsequently to it. With help of id i fix the table header.can anyone fix this alignment.Thanks in advance.
<table id="table-1" class="table table-hover">
<thead>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<body>
<div class="content">
<table class="table table-striped">
<tbody>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr><tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr><tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
Here is the Demo
You want to show a fixed thead (clone table) on top of a scrolling table (original table).
Check this working demo: CODEPEN demo
Is this what you are looking for? How it works:
HTML part:
<!-- a CONTAINER for everything -->
<div id="table-holder">
<!-- a fixed TOP that is visible or hidden on scroll -->
<div id="table-top">
<!-- a TABLE CLONE that contains the THEAD -->
<table id="table-clone" border="1"></table>
</div>
<!-- a CONTAINER that allows the original table to scroll -->
<div id="table-scroll">
<!-- the ORIGINAL TABLE -->
<table id="table-original" border="1">
<!-- the THEAD -->
<thead>....</thead>
<!-- the TBODY -->
<tbody>....</tbody>
</table>
</div><!-- endof: #table-scroll -->
</div><!-- endof: #table-holder -->
CSS part:
#table-holder {
position:relative;
}
#table-top {
width:100%; /* important */
position:absolute; /* important -> always at top */
display:none; /* hidden at first */
}
#table-scroll {
float:left;
width:100%;
height:100%;
overflow-y:scroll; /* important */
}
table {
width:100%;
}
JS part (jQuery):
// set main table html vars
var $table_top = $("#table-top");
var $table_scroll = $("#table-scroll");
var $table_clone = $("#table-clone");
var $thead_original = $("#table-original thead");
var $thead_clone = $thead_original.clone();
// copy the original THEAD into table-top
$table_clone.append($thead_clone);
// adjust table-top width (consider the width of the Y scrollbar)
$table_top.css("width", $thead_original.width())
// set vars needed to show/hide table-top
var thead_height = $thead_original.height();
//// set the threshold for the show/hide action
var visible_top = $table_scroll.offset().top;
var table_top_visible = 0;
// set onScroll action: show/hide table-top
$table_scroll.on("scroll",function(){
// the the current offset of the original THEAD
var thead_top = $thead_original.offset().top;
//// get the position of the bottom of the THEAD
var thead_bottom = thead_top + thead_height;
// check if the original THEAD is hidden
if (thead_bottom < visible_top) {
// if the original is hidden -> show the clone
if (!table_top_visible) {
table_top_visible = 1;
$table_top.fadeIn();
}
} else {
// else, the original is visible -> hide the clone
if (table_top_visible) {
table_top_visible = 0;
$table_top.fadeOut();
}
}
});
Here is a demo. How can I do the functions in order:
1. enlarge -> 2. rotate 360 degrees -> 3. resize to before enlargement -> 4. change color (toggle)
$(document).ready(function() {
$('.tlist td div').click(function() {
$(this).css("z-index", "1000").animate({
width: '+=90px',
height: '+=90px',
fontSize: '300%',
zIndex: 1000
}, {
step: function(now, fx) {
$(this).css('-webkit-transform', 'rotate(360deg)');
},
duration: 'slow'
}).animate({
width: '-=90px',
height: '-=90px',
fontSize: '120%',
zIndex: 1
}).toggleClass('changeColor').css("z-index", "1");
});
});
body {
width: 1340px;
text-align: center;
}
.tlist {
display: inline;
border-collapse: separate;
border-spacing: 2px 7px;
}
#rightT {
padding-left: 115px;
}
.tlist th {
font-size: 160%;
font-family: Sans-serif;
}
.tlist td {
width: 56px;
height: 54px;
border: 1px solid lightgrey;
}
.tlist td div {
position: absolute;
border: 1px solid lightgrey;
width: 45px;
color: white;
background-color: orange;
font-family: arial;
font-size: 120%;
text-align: center;
padding-top: 7px;
padding-bottom: 11px;
padding-left: 1px;
padding-right: 1px;
margin-top: -24px;
margin-left: 3px;
}
.tlist td div.changeColor {
color: black;
background-color: white;
border-color: red;
}
#left1,
#left2,
#left5,
#left6,
#left7,
#left8,
#left3,
#left4 {
text-align: right;
}
#right1,
#right2,
#right3,
#right4,
#right5,
#right6,
#right7,
#right8 {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id='leftT' class='tlist'>
<tr>
<th></th>
<th id='a1'>1</th>
<th id='a2'>2</th>
<th id='a3'>3</th>
<th id='a4'>4</th>
<th id='a5'>5</th>
<th id='a6'>6</th>
<th id='a7'>7</th>
<th id='a8'>8</th>
</tr>
<tr>
<th id='left1'>15/F</th>
<td id='f1501'>
<div>1501</div>
</td>
<td id='f1502'>
<div>1502</div>
</td>
<td id='f1503'>
<div>1503</div>
</td>
<td id='f1504'>
<div>1504</div>
</td>
<td id='f1505'>
<div>1505</div>
</td>
<td id='f1506'>
<div>1506</div>
</td>
<td id='f1507'>
<div>1507</div>
</td>
<td id='f1508'>
<div>1508</div>
</td>
<th id='right1'>15/F</th>
</tr>
<tr>
<th></th>
<td id='f1401'>
<div>1401</div>
</td>
<td id='f1402'>
<div>1402</div>
</td>
<td id='f1403'>
<div>1403</div>
</td>
<td id='f1404'>
<div>1404</div>
</td>
<td id='f1405'>
<div>1405</div>
</td>
<td id='f1406'>
<div>1406</div>
</td>
<td id='f1407'>
<div>1407</div>
</td>
<td id='f1408'>
<div>1408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1301'>
<div>1301</div>
</td>
<td id='f1302'>
<div>1302</div>
</td>
<td id='f1303'>
<div>1303</div>
</td>
<td id='f1304'>
<div>1304</div>
</td>
<td id='f1305'>
<div>1305</div>
</td>
<td id='f1306'>
<div>1306</div>
</td>
<td id='f1307'>
<div>1307</div>
</td>
<td id='f1308'>
<div>1308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1201'>
<div>1201</div>
</td>
<td id='f1202'>
<div>1202</div>
</td>
<td id='f1203'>
<div>1203</div>
</td>
<td id='f1204'>
<div>1204</div>
</td>
<td id='f1205'>
<div>1205</div>
</td>
<td id='f1206'>
<div>1206</div>
</td>
<td id='f1207'>
<div>1207</div>
</td>
<td id='f1208'>
<div>1208</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1101'>
<div>1101</div>
</td>
<td id='f1102'>
<div>1102</div>
</td>
<td id='f1103'>
<div>1103</div>
</td>
<td id='f1104'>
<div>1104</div>
</td>
<td id='f1105'>
<div>1105</div>
</td>
<td id='f1106'>
<div>1106</div>
</td>
<td id='f1107'>
<div>1107</div>
</td>
<td id='f1108'>
<div>1108</div>
</td>
<th></th>
</tr>
<tr>
<th id='left2'>10/F</th>
<td id='f1001'>
<div>1001</div>
</td>
<td id='f1002'>
<div>1002</div>
</td>
<td id='f1003'>
<div>1003</div>
</td>
<td id='f1004'>
<div>1004</div>
</td>
<td id='f1005'>
<div>1005</div>
</td>
<td id='f1006'>
<div>1006</div>
</td>
<td id='f1007'>
<div>1007</div>
</td>
<td id='f1008'>
<div>1008</div>
</td>
<th id='right2'>10/F</th>
</tr>
<tr>
<th></th>
<td id='f901'>
<div>901</div>
</td>
<td id='f902'>
<div>902</div>
</td>
<td id='f903'>
<div>903</div>
</td>
<td id='f904'>
<div>904</div>
</td>
<td id='f905'>
<div>905</div>
</td>
<td id='f906'>
<div>906</div>
</td>
<td id='f907'>
<div>907</div>
</td>
<td id='f908'>
<div>908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f801'>
<div>801</div>
</td>
<td id='f802'>
<div>802</div>
</td>
<td id='f803'>
<div>803</div>
</td>
<td id='f804'>
<div>804</div>
</td>
<td id='f805'>
<div>805</div>
</td>
<td id='f806'>
<div>806</div>
</td>
<td id='f807'>
<div>807</div>
</td>
<td id='f808'>
<div>808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f701'>
<div>701</div>
</td>
<td id='f702'>
<div>702</div>
</td>
<td id='f703'>
<div>703</div>
</td>
<td id='f704'>
<div>704</div>
</td>
<td id='f705'>
<div>705</div>
</td>
<td id='f706'>
<div>706</div>
</td>
<td id='f707'>
<div>707</div>
</td>
<td id='f708'>
<div>708</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f601'>
<div>601</div>
</td>
<td id='f602'>
<div>602</div>
</td>
<td id='f603'>
<div>603</div>
</td>
<td id='f604'>
<div>604</div>
</td>
<td id='f605'>
<div>605</div>
</td>
<td id='f606'>
<div>606</div>
</td>
<td id='f607'>
<div>607</div>
</td>
<td id='f608'>
<div>608</div>
</td>
<th></th>
</tr>
<tr>
<th id='left3'>5/F</th>
<td id='f501'>
<div>501</div>
</td>
<td id='f502'>
<div>502</div>
</td>
<td id='f503'>
<div>503</div>
</td>
<td id='f504'>
<div>504</div>
</td>
<td id='f505'>
<div>505</div>
</td>
<td id='f506'>
<div>506</div>
</td>
<td id='f507'>
<div>507</div>
</td>
<td id='f508'>
<div>508</div>
</td>
<th id='right3'>5/F</th>
</tr>
<tr>
<th></th>
<td id='f401'>
<div>401</div>
</td>
<td id='f402'>
<div>402</div>
</td>
<td id='f403'>
<div>403</div>
</td>
<td id='f404'>
<div>404</div>
</td>
<td id='f405'>
<div>405</div>
</td>
<td id='f406'>
<div>406</div>
</td>
<td id='f407'>
<div>407</div>
</td>
<td id='f408'>
<div>408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f301'>
<div>301</div>
</td>
<td id='f302'>
<div>302</div>
</td>
<td id='f303'>
<div>303</div>
</td>
<td id='f304'>
<div>304</div>
</td>
<td id='f305'>
<div>305</div>
</td>
<td id='f306'>
<div>306</div>
</td>
<td id='f307'>
<div>307</div>
</td>
<td id='f308'>
<div>308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f201'>
<div>201</div>
</td>
<td id='f202'>
<div>202</div>
</td>
<td id='f203'>
<div>203</div>
</td>
<td id='f204'>
<div>204</div>
</td>
<td id='f205'>
<div>205</div>
</td>
<td id='f206'>
<div>206</div>
</td>
<td id='f207'>
<div>207</div>
</td>
<td id='f208'>
<div>208</div>
</td>
<th></th>
</tr>
<tr>
<th id='left4'>1/F</th>
<td id='f101'>
<div>101</div>
</td>
<td id='f102'>
<div>102</div>
</td>
<td id='f103'>
<div>103</div>
</td>
<td id='f104'>
<div>104</div>
</td>
<td id='f105'>
<div>105</div>
</td>
<td id='f106'>
<div>106</div>
</td>
<td id='f107'>
<div>107</div>
</td>
<td id='f108'>
<div>108</div>
</td>
<th id='right4'>1/F</th>
</tr>
</table>
<!-- Table on Right -->
<table id='rightT' class='tlist'>
<tr>
<th></th>
<th id='b1'>1</th>
<th id='b2'>2</th>
<th id='b3'>3</th>
<th id='b4'>4</th>
<th id='b5'>5</th>
<th id='b6'>6</th>
<th id='b7'>7</th>
<th id='b8'>8</th>
</tr>
<tr>
<th id='left5'>30/F</th>
<td id='f3001'>
<div>3001</div>
</td>
<td id='f3002'>
<div>3002</div>
</td>
<td id='f3003'>
<div>3003</div>
</td>
<td id='f3004'>
<div>3004</div>
</td>
<td id='f3005'>
<div>3005</div>
</td>
<td id='f3006'>
<div>3006</div>
</td>
<td id='f3007'>
<div>3007</div>
</td>
<td id='f3008'>
<div>3008</div>
</td>
<th id='right5'>30/F</th>
</tr>
<tr>
<th></th>
<td id='f2901'>
<div>2901</div>
</td>
<td id='f2902'>
<div>2902</div>
</td>
<td id='f2903'>
<div>2903</div>
</td>
<td id='f2904'>
<div>2904</div>
</td>
<td id='f2905'>
<div>2905</div>
</td>
<td id='f2906'>
<div>2906</div>
</td>
<td id='f2907'>
<div>2907</div>
</td>
<td id='f2908'>
<div>2908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2801'>
<div>2801</div>
</td>
<td id='f2802'>
<div>2802</div>
</td>
<td id='f2803'>
<div>2803</div>
</td>
<td id='f2804'>
<div>2804</div>
</td>
<td id='f2805'>
<div>2805</div>
</td>
<td id='f2806'>
<div>2806</div>
</td>
<td id='f2807'>
<div>2807</div>
</td>
<td id='f2808'>
<div>2808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2701'>
<div>2701</div>
</td>
<td id='f2702'>
<div>2702</div>
</td>
<td id='f2703'>
<div>2703</div>
</td>
<td id='f2704'>
<div>2704</div>
</td>
<td id='f2705'>
<div>2705</div>
</td>
<td id='f2706'>
<div>2706</div>
</td>
<td id='f2707'>
<div>2707</div>
</td>
<td id='f2708'>
<div>2708</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2601'>
<div>2601</div>
</td>
<td id='f2602'>
<div style='background-color:white;color:black;'>2602</div>
</td>
<td id='f2603'>
<div>2603</div>
</td>
<td id='f2604'>
<div>2604</div>
</td>
<td id='f2605'>
<div>2605</div>
</td>
<td id='f2606'>
<div>2606</div>
</td>
<td id='f2607'>
<div>2607</div>
</td>
<td id='f2608'>
<div>2608</div>
</td>
<th></th>
</tr>
<tr>
<th id='left6'>25/F</th>
<td id='f2501'>
<div>2501</div>
</td>
<td id='f2502'>
<div>2502</div>
</td>
<td id='f2503'>
<div>2503</div>
</td>
<td id='f2504'>
<div>2504</div>
</td>
<td id='f2505'>
<div>2505</div>
</td>
<td id='f2506'>
<div>2506</div>
</td>
<td id='f2507'>
<div>2507</div>
</td>
<td id='f2508'>
<div>2508</div>
</td>
<th id='right6'>25/F</th>
</tr>
<tr>
<th></th>
<td id='f2401'>
<div>2401</div>
</td>
<td id='f2402'>
<div>2402</div>
</td>
<td id='f2403'>
<div>2403</div>
</td>
<td id='f2404'>
<div>2404</div>
</td>
<td id='f2405'>
<div>2405</div>
</td>
<td id='f2406'>
<div>2406</div>
</td>
<td id='f2407'>
<div>2407</div>
</td>
<td id='f2408'>
<div>2408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2301'>
<div>2301</div>
</td>
<td id='f2302'>
<div>2302</div>
</td>
<td id='f2303'>
<div>2303</div>
</td>
<td id='f2304'>
<div>2304</div>
</td>
<td id='f2305'>
<div>2305</div>
</td>
<td id='f2306'>
<div>2306</div>
</td>
<td id='f2307'>
<div>2307</div>
</td>
<td id='f2308'>
<div>2308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2201'>
<div>2201</div>
</td>
<td id='f2202'>
<div>2202</div>
</td>
<td id='f2203'>
<div>2203</div>
</td>
<td id='f2204'>
<div>2204</div>
</td>
<td id='f2205'>
<div>2205</div>
</td>
<td id='f2206'>
<div>2206</div>
</td>
<td id='f2207'>
<div>2207</div>
</td>
<td id='f2208'>
<div>2208</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2101'>
<div>2101</div>
</td>
<td id='f2102'>
<div>2102</div>
</td>
<td id='f2103'>
<div>2103</div>
</td>
<td id='f2104'>
<div>2104</div>
</td>
<td id='f2105'>
<div>2105</div>
</td>
<td id='f2106'>
<div>2106</div>
</td>
<td id='f2107'>
<div>2107</div>
</td>
<td id='f2108'>
<div>2108</div>
</td>
<th></th>
</tr>
<tr>
<th id='left7'>20/F</th>
<td id='f2001'>
<div>2001</div>
</td>
<td id='f2002'>
<div>2002</div>
</td>
<td id='f2003'>
<div>2003</div>
</td>
<td id='f2004'>
<div>2004</div>
</td>
<td id='f2005'>
<div>2005</div>
</td>
<td id='f2006'>
<div>2006</div>
</td>
<td id='f2007'>
<div>2007</div>
</td>
<td id='f2008'>
<div>2008</div>
</td>
<th id='right7'>20/F</th>
</tr>
<tr>
<th></th>
<td id='f1901'>
<div>1901</div>
</td>
<td id='f1902'>
<div>1902</div>
</td>
<td id='f1903'>
<div>1903</div>
</td>
<td id='f1904'>
<div>1904</div>
</td>
<td id='f1905'>
<div>1905</div>
</td>
<td id='f1906'>
<div>1906</div>
</td>
<td id='f1907'>
<div>1907</div>
</td>
<td id='f1908'>
<div>1908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1801'>
<div>1801</div>
</td>
<td id='f1802'>
<div>1802</div>
</td>
<td id='f1803'>
<div style='background-color:white;color:black;'>1803</div>
</td>
<td id='f1804'>
<div>1804</div>
</td>
<td id='f1805'>
<div>1805</div>
</td>
<td id='f1806'>
<div>1806</div>
</td>
<td id='f1807'>
<div>1807</div>
</td>
<td id='f1808'>
<div>1808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1701'>
<div>1701</div>
</td>
<td id='f1702'>
<div>1702</div>
</td>
<td id='f1703'>
<div>1703</div>
</td>
<td id='f1704'>
<div>1704</div>
</td>
<td id='f1705'>
<div>1705</div>
</td>
<td id='f1706'>
<div>1706</div>
</td>
<td id='f1707'>
<div>1707</div>
</td>
<td id='f1708'>
<div>1708</div>
</td>
<th></th>
</tr>
<tr>
<th id='left8'>16/F</th>
<td id='f1601'>
<div>1601</div>
</td>
<td id='f1602'>
<div>1602</div>
</td>
<td id='f1603'>
<div>1603</div>
</td>
<td id='f1604'>
<div>1604</div>
</td>
<td id='f1605'>
<div>1605</div>
</td>
<td id='f1606'>
<div>1606</div>
</td>
<td id='f1607'>
<div>1607</div>
</td>
<td id='f1608'>
<div>1608</div>
</td>
<th id='right8'>16/F</th>
</tr>
</table>
jsfiddle
A Simple yet most efficient way of doing this is using css.
A Simple CSS Solution for you using your own fiddle.
Updated the Answer as per comment.
jsfiddle
$(document).ready(function() {
$('.tlist td div').click(function() {
var t = $(this)
t.removeClass('changeStyle');
setTimeout(function() {
t.addClass('changeStyle');
}, 10);
});
});
body {
width: 1340px;
text-align: center;
}
.tlist {
display: inline;
border-collapse: separate;
border-spacing: 2px 7px;
}
#rightT {
padding-left: 115px;
}
.tlist th {
font-size: 160%;
font-family: Sans-serif;
}
.tlist td {
width: 56px;
height: 54px;
border: 1px solid lightgrey;
}
.tlist td div {
position: absolute;
border: 1px solid lightgrey;
width: 45px;
color: white;
background-color: orange;
font-family: arial;
font-size: 120%;
text-align: center;
padding-top: 7px;
padding-bottom: 11px;
padding-left: 1px;
padding-right: 1px;
margin-top: -24px;
margin-left: 3px;
}
.tlist td div.changeColor {
color: black;
background-color: white;
border-color: red;
}
#left1,
#left2,
#left5,
#left6,
#left7,
#left8,
#left3,
#left4 {
text-align: right;
}
#right1,
#right2,
#right3,
#right4,
#right5,
#right6,
#right7,
#right8 {
text-align: left;
}
#keyframes styleIt {
0% {}
25% {
transform: scale(1.5) rotate(0deg)
}
70% {
transform: scale(1.5) rotate(360deg);
}
100% {
transform: scale(1);
color: black;
background-color: white;
border-color: red;
}
}
.changeStyle {
animation: styleIt 1s forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='leftT' class='tlist'>
<tr>
<th></th>
<th id='a1'>1</th>
<th id='a2'>2</th>
<th id='a3'>3</th>
<th id='a4'>4</th>
<th id='a5'>5</th>
<th id='a6'>6</th>
<th id='a7'>7</th>
<th id='a8'>8</th>
</tr>
<tr>
<th id='left1'>15/F</th>
<td id='f1501'>
<div>1501</div>
</td>
<td id='f1502'>
<div>1502</div>
</td>
<td id='f1503'>
<div>1503</div>
</td>
<td id='f1504'>
<div>1504</div>
</td>
<td id='f1505'>
<div>1505</div>
</td>
<td id='f1506'>
<div>1506</div>
</td>
<td id='f1507'>
<div>1507</div>
</td>
<td id='f1508'>
<div>1508</div>
</td>
<th id='right1'>15/F</th>
</tr>
<tr>
<th></th>
<td id='f1401'>
<div>1401</div>
</td>
<td id='f1402'>
<div>1402</div>
</td>
<td id='f1403'>
<div>1403</div>
</td>
<td id='f1404'>
<div>1404</div>
</td>
<td id='f1405'>
<div>1405</div>
</td>
<td id='f1406'>
<div>1406</div>
</td>
<td id='f1407'>
<div>1407</div>
</td>
<td id='f1408'>
<div>1408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1301'>
<div>1301</div>
</td>
<td id='f1302'>
<div>1302</div>
</td>
<td id='f1303'>
<div>1303</div>
</td>
<td id='f1304'>
<div>1304</div>
</td>
<td id='f1305'>
<div>1305</div>
</td>
<td id='f1306'>
<div>1306</div>
</td>
<td id='f1307'>
<div>1307</div>
</td>
<td id='f1308'>
<div>1308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1201'>
<div>1201</div>
</td>
<td id='f1202'>
<div>1202</div>
</td>
<td id='f1203'>
<div>1203</div>
</td>
<td id='f1204'>
<div>1204</div>
</td>
<td id='f1205'>
<div>1205</div>
</td>
<td id='f1206'>
<div>1206</div>
</td>
<td id='f1207'>
<div>1207</div>
</td>
<td id='f1208'>
<div>1208</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1101'>
<div>1101</div>
</td>
<td id='f1102'>
<div>1102</div>
</td>
<td id='f1103'>
<div>1103</div>
</td>
<td id='f1104'>
<div>1104</div>
</td>
<td id='f1105'>
<div>1105</div>
</td>
<td id='f1106'>
<div>1106</div>
</td>
<td id='f1107'>
<div>1107</div>
</td>
<td id='f1108'>
<div>1108</div>
</td>
<th></th>
</tr>
<tr>
<th id='left2'>10/F</th>
<td id='f1001'>
<div>1001</div>
</td>
<td id='f1002'>
<div>1002</div>
</td>
<td id='f1003'>
<div>1003</div>
</td>
<td id='f1004'>
<div>1004</div>
</td>
<td id='f1005'>
<div>1005</div>
</td>
<td id='f1006'>
<div>1006</div>
</td>
<td id='f1007'>
<div>1007</div>
</td>
<td id='f1008'>
<div>1008</div>
</td>
<th id='right2'>10/F</th>
</tr>
<tr>
<th></th>
<td id='f901'>
<div>901</div>
</td>
<td id='f902'>
<div>902</div>
</td>
<td id='f903'>
<div>903</div>
</td>
<td id='f904'>
<div>904</div>
</td>
<td id='f905'>
<div>905</div>
</td>
<td id='f906'>
<div>906</div>
</td>
<td id='f907'>
<div>907</div>
</td>
<td id='f908'>
<div>908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f801'>
<div>801</div>
</td>
<td id='f802'>
<div>802</div>
</td>
<td id='f803'>
<div>803</div>
</td>
<td id='f804'>
<div>804</div>
</td>
<td id='f805'>
<div>805</div>
</td>
<td id='f806'>
<div>806</div>
</td>
<td id='f807'>
<div>807</div>
</td>
<td id='f808'>
<div>808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f701'>
<div>701</div>
</td>
<td id='f702'>
<div>702</div>
</td>
<td id='f703'>
<div>703</div>
</td>
<td id='f704'>
<div>704</div>
</td>
<td id='f705'>
<div>705</div>
</td>
<td id='f706'>
<div>706</div>
</td>
<td id='f707'>
<div>707</div>
</td>
<td id='f708'>
<div>708</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f601'>
<div>601</div>
</td>
<td id='f602'>
<div>602</div>
</td>
<td id='f603'>
<div>603</div>
</td>
<td id='f604'>
<div>604</div>
</td>
<td id='f605'>
<div>605</div>
</td>
<td id='f606'>
<div>606</div>
</td>
<td id='f607'>
<div>607</div>
</td>
<td id='f608'>
<div>608</div>
</td>
<th></th>
</tr>
<tr>
<th id='left3'>5/F</th>
<td id='f501'>
<div>501</div>
</td>
<td id='f502'>
<div>502</div>
</td>
<td id='f503'>
<div>503</div>
</td>
<td id='f504'>
<div>504</div>
</td>
<td id='f505'>
<div>505</div>
</td>
<td id='f506'>
<div>506</div>
</td>
<td id='f507'>
<div>507</div>
</td>
<td id='f508'>
<div>508</div>
</td>
<th id='right3'>5/F</th>
</tr>
<tr>
<th></th>
<td id='f401'>
<div>401</div>
</td>
<td id='f402'>
<div>402</div>
</td>
<td id='f403'>
<div>403</div>
</td>
<td id='f404'>
<div>404</div>
</td>
<td id='f405'>
<div>405</div>
</td>
<td id='f406'>
<div>406</div>
</td>
<td id='f407'>
<div>407</div>
</td>
<td id='f408'>
<div>408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f301'>
<div>301</div>
</td>
<td id='f302'>
<div>302</div>
</td>
<td id='f303'>
<div>303</div>
</td>
<td id='f304'>
<div>304</div>
</td>
<td id='f305'>
<div>305</div>
</td>
<td id='f306'>
<div>306</div>
</td>
<td id='f307'>
<div>307</div>
</td>
<td id='f308'>
<div>308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f201'>
<div>201</div>
</td>
<td id='f202'>
<div>202</div>
</td>
<td id='f203'>
<div>203</div>
</td>
<td id='f204'>
<div>204</div>
</td>
<td id='f205'>
<div>205</div>
</td>
<td id='f206'>
<div>206</div>
</td>
<td id='f207'>
<div>207</div>
</td>
<td id='f208'>
<div>208</div>
</td>
<th></th>
</tr>
<tr>
<th id='left4'>1/F</th>
<td id='f101'>
<div>101</div>
</td>
<td id='f102'>
<div>102</div>
</td>
<td id='f103'>
<div>103</div>
</td>
<td id='f104'>
<div>104</div>
</td>
<td id='f105'>
<div>105</div>
</td>
<td id='f106'>
<div>106</div>
</td>
<td id='f107'>
<div>107</div>
</td>
<td id='f108'>
<div>108</div>
</td>
<th id='right4'>1/F</th>
</tr>
</table>
<!-- Table on Right -->
<table id='rightT' class='tlist'>
<tr>
<th></th>
<th id='b1'>1</th>
<th id='b2'>2</th>
<th id='b3'>3</th>
<th id='b4'>4</th>
<th id='b5'>5</th>
<th id='b6'>6</th>
<th id='b7'>7</th>
<th id='b8'>8</th>
</tr>
<tr>
<th id='left5'>30/F</th>
<td id='f3001'>
<div>3001</div>
</td>
<td id='f3002'>
<div>3002</div>
</td>
<td id='f3003'>
<div>3003</div>
</td>
<td id='f3004'>
<div>3004</div>
</td>
<td id='f3005'>
<div>3005</div>
</td>
<td id='f3006'>
<div>3006</div>
</td>
<td id='f3007'>
<div>3007</div>
</td>
<td id='f3008'>
<div>3008</div>
</td>
<th id='right5'>30/F</th>
</tr>
<tr>
<th></th>
<td id='f2901'>
<div>2901</div>
</td>
<td id='f2902'>
<div>2902</div>
</td>
<td id='f2903'>
<div>2903</div>
</td>
<td id='f2904'>
<div>2904</div>
</td>
<td id='f2905'>
<div>2905</div>
</td>
<td id='f2906'>
<div>2906</div>
</td>
<td id='f2907'>
<div>2907</div>
</td>
<td id='f2908'>
<div>2908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2801'>
<div>2801</div>
</td>
<td id='f2802'>
<div>2802</div>
</td>
<td id='f2803'>
<div>2803</div>
</td>
<td id='f2804'>
<div>2804</div>
</td>
<td id='f2805'>
<div>2805</div>
</td>
<td id='f2806'>
<div>2806</div>
</td>
<td id='f2807'>
<div>2807</div>
</td>
<td id='f2808'>
<div>2808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2701'>
<div>2701</div>
</td>
<td id='f2702'>
<div>2702</div>
</td>
<td id='f2703'>
<div>2703</div>
</td>
<td id='f2704'>
<div>2704</div>
</td>
<td id='f2705'>
<div>2705</div>
</td>
<td id='f2706'>
<div>2706</div>
</td>
<td id='f2707'>
<div>2707</div>
</td>
<td id='f2708'>
<div>2708</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2601'>
<div>2601</div>
</td>
<td id='f2602'>
<div style='background-color:white;color:black;'>2602</div>
</td>
<td id='f2603'>
<div>2603</div>
</td>
<td id='f2604'>
<div>2604</div>
</td>
<td id='f2605'>
<div>2605</div>
</td>
<td id='f2606'>
<div>2606</div>
</td>
<td id='f2607'>
<div>2607</div>
</td>
<td id='f2608'>
<div>2608</div>
</td>
<th></th>
</tr>
<tr>
<th id='left6'>25/F</th>
<td id='f2501'>
<div>2501</div>
</td>
<td id='f2502'>
<div>2502</div>
</td>
<td id='f2503'>
<div>2503</div>
</td>
<td id='f2504'>
<div>2504</div>
</td>
<td id='f2505'>
<div>2505</div>
</td>
<td id='f2506'>
<div>2506</div>
</td>
<td id='f2507'>
<div>2507</div>
</td>
<td id='f2508'>
<div>2508</div>
</td>
<th id='right6'>25/F</th>
</tr>
<tr>
<th></th>
<td id='f2401'>
<div>2401</div>
</td>
<td id='f2402'>
<div>2402</div>
</td>
<td id='f2403'>
<div>2403</div>
</td>
<td id='f2404'>
<div>2404</div>
</td>
<td id='f2405'>
<div>2405</div>
</td>
<td id='f2406'>
<div>2406</div>
</td>
<td id='f2407'>
<div>2407</div>
</td>
<td id='f2408'>
<div>2408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2301'>
<div>2301</div>
</td>
<td id='f2302'>
<div>2302</div>
</td>
<td id='f2303'>
<div>2303</div>
</td>
<td id='f2304'>
<div>2304</div>
</td>
<td id='f2305'>
<div>2305</div>
</td>
<td id='f2306'>
<div>2306</div>
</td>
<td id='f2307'>
<div>2307</div>
</td>
<td id='f2308'>
<div>2308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2201'>
<div>2201</div>
</td>
<td id='f2202'>
<div>2202</div>
</td>
<td id='f2203'>
<div>2203</div>
</td>
<td id='f2204'>
<div>2204</div>
</td>
<td id='f2205'>
<div>2205</div>
</td>
<td id='f2206'>
<div>2206</div>
</td>
<td id='f2207'>
<div>2207</div>
</td>
<td id='f2208'>
<div>2208</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2101'>
<div>2101</div>
</td>
<td id='f2102'>
<div>2102</div>
</td>
<td id='f2103'>
<div>2103</div>
</td>
<td id='f2104'>
<div>2104</div>
</td>
<td id='f2105'>
<div>2105</div>
</td>
<td id='f2106'>
<div>2106</div>
</td>
<td id='f2107'>
<div>2107</div>
</td>
<td id='f2108'>
<div>2108</div>
</td>
<th></th>
</tr>
<tr>
<th id='left7'>20/F</th>
<td id='f2001'>
<div>2001</div>
</td>
<td id='f2002'>
<div>2002</div>
</td>
<td id='f2003'>
<div>2003</div>
</td>
<td id='f2004'>
<div>2004</div>
</td>
<td id='f2005'>
<div>2005</div>
</td>
<td id='f2006'>
<div>2006</div>
</td>
<td id='f2007'>
<div>2007</div>
</td>
<td id='f2008'>
<div>2008</div>
</td>
<th id='right7'>20/F</th>
</tr>
<tr>
<th></th>
<td id='f1901'>
<div>1901</div>
</td>
<td id='f1902'>
<div>1902</div>
</td>
<td id='f1903'>
<div>1903</div>
</td>
<td id='f1904'>
<div>1904</div>
</td>
<td id='f1905'>
<div>1905</div>
</td>
<td id='f1906'>
<div>1906</div>
</td>
<td id='f1907'>
<div>1907</div>
</td>
<td id='f1908'>
<div>1908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1801'>
<div>1801</div>
</td>
<td id='f1802'>
<div>1802</div>
</td>
<td id='f1803'>
<div style='background-color:white;color:black;'>1803</div>
</td>
<td id='f1804'>
<div>1804</div>
</td>
<td id='f1805'>
<div>1805</div>
</td>
<td id='f1806'>
<div>1806</div>
</td>
<td id='f1807'>
<div>1807</div>
</td>
<td id='f1808'>
<div>1808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1701'>
<div>1701</div>
</td>
<td id='f1702'>
<div>1702</div>
</td>
<td id='f1703'>
<div>1703</div>
</td>
<td id='f1704'>
<div>1704</div>
</td>
<td id='f1705'>
<div>1705</div>
</td>
<td id='f1706'>
<div>1706</div>
</td>
<td id='f1707'>
<div>1707</div>
</td>
<td id='f1708'>
<div>1708</div>
</td>
<th></th>
</tr>
<tr>
<th id='left8'>16/F</th>
<td id='f1601'>
<div>1601</div>
</td>
<td id='f1602'>
<div>1602</div>
</td>
<td id='f1603'>
<div>1603</div>
</td>
<td id='f1604'>
<div>1604</div>
</td>
<td id='f1605'>
<div>1605</div>
</td>
<td id='f1606'>
<div>1606</div>
</td>
<td id='f1607'>
<div>1607</div>
</td>
<td id='f1608'>
<div>1608</div>
</td>
<th id='right8'>16/F</th>
</tr>
</table>
Hope this Helps you if you want jQuery solution please do ask, ty..
I am trying to adding image on html table dynamically using JQuery, but I am confusing how to find out a table 2,3..etc tr with in first td to add image.
My table structure has no id or class how to find, but before table have some text as below.
<table width="100%" border="0" cellspacing="1" cellpadding="5">
<tbody>
<tr valign="top">
<td colspan="2"><b>Order Details:</b><br> <br>
<table width="100%" bgcolor="#EEEEEE">
<tbody>
<tr>
<td>
<b>Code</b>
</td>
<td>
<b>SKU</b>
</td>
<td>
<b>Quantity</b>
</td>
<td>
<b>Price</b>
</td>
<td>
<b>Grand Total</b>
</td>
</tr>
<tr>
<td>10172</td>
<td>Product 1<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>
₹ 250.00
</td>
</tr>
<tr>
<td>10165</td>
<td>Product 2<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>₹ 250.00
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Subtotal: </td>
<td>₹ 250.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Tax: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Shipping Cost: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Grand Total: </td>
<td>₹ 250.00</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
</tbody></table>
How to Add product Image before of the SKU.
Any help plz..?
As you don't have a thead or even use th for the headers, you'll have to skip the first row, you can use ">" to specify the direct hierarchy, eg:
$("table>tbody>tr>td>table>tbody>tr:not(:first-child)").each(function() {
var codecell = $(this).find("td:eq(0)");
var img = "/pathtoimage/" + codecell.text() + ".jpg"
codecell.after("<td><img src='" + img + '/></td>");
});
Updated: Fixed typo for ("td:eq(0)") vs ("td").eq(0) vs ("td")[0]
I'm trying to sum time with momentjs.
Here is my JavaScript function :
function all_time()
{
$(".aaa").each(function() {
$this = $(this);
var total = moment().startOf('day');
$this.find('.jmljam').each (function() {
var value = $this.find(this).val();
var thisMoment = moment(value, 'HH:mm', true);
if(thisMoment.isValid()){
total.add(thisMoment);
$this.find(".totalseluruhjam").val(total.format("HH:mm"));
}
});
});
}
And Here is My HTML Table
<form method="POST" action="http://localhost:84/payroll2/dinas_audit/claim/1105321/AD0000002">
<table class="aaa table">
<thead>
<tr>
<td> No </td>
<td> Full Name </td>
<td> Attendance Date </td>
<td> In Time </td>
<td> Out Time </td>
<td> Waktu Lebih </td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-01</td>
<td class="jammasuk">
07:00:00 </td>
<td class="jampulang">
23:00:00 </td>
<td class="lebih">08:00</td>
</tr>
<tr>
<td>2</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-02</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>3</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-03</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Total Jam Lebih</td>
<td>
<input name="jamlebih" type="text" readonly disabled class="jmljam" />
</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Ro Yang DiDapatkan</td>
<td>
<input name="dapetro" type="text" readonly class="ronya" />
</td>
</tr>
</tbody>
</table>
<table class="aaa table">
<thead>
<tr>
<td> No </td>
<td> Full Name </td>
<td> Attendance Date </td>
<td> In Time </td>
<td> Out Time </td>
<td> Waktu Lebih </td>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-04</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
18:21:00 </td>
<td class="lebih">01:21</td>
</tr>
<tr>
<td>5</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-05</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
20:21:00 </td>
<td class="lebih">03:21</td>
</tr>
<tr>
<td>6</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-06</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
21:21:00 </td>
<td class="lebih">04:21</td>
</tr>
<tr>
<td>7</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-07</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>8</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-08</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>9</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-09</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Total Jam Lebih</td>
<td>
<input name="jamlebih" type="text" readonly disabled class="jmljam" />
</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Ro Yang DiDapatkan</td>
<td>
<input name="dapetro" type="text" readonly class="ronya" />
</td>
</tr>
</tbody>
</table>
<table class="table">
<tr>
<td> Total Jam Lebih : </td><td><input type="text" readonly="readonly" class='totalseluruhjam'/></td>
</tr>
<tr>
<td> Total RO Yang Di Dapat : </td><td><input type="text" readonly="readonly" class='totalseluruhro'/></td>
</tr>
</table>
</div>
<div class="box-footer">
<input value='submit' type='submit' class='btn btn-success pull-right claim'> </div>
</div>
</div>
</form>
As you can see from above. I have multiple tables. I'm able to sum .totalseluruhro` with this js
function all_ro()
{
var sum=0;
$(".aaa").each(function() {
$this = $(this);
sum += parseFloat($this.find('.ronya').val());
$('.totalseluruhro').val(sum);
})
}
But now i'm trying to sum every .jmljam and then set the result to .totalseluruhjam. I trying to sum jmljam with function all_time() but it's not working. I can't see any error from browser console. So, how to sum .jmljam ?
Please check my Fiddle https://jsfiddle.net/s9wfh9ye/23/
Give a shot with this.
function all_time()
{
var total = moment().startOf('day');
$(".aaa").each(function() {
$this = $(this);
$this.find('.jmljam').each (function() {
var value = $this.find(this).val();
var thisMoment = moment(value, 'HH:mm', true);
if(thisMoment.isValid()){
total.add(thisMoment);
}
});
});
$(".totalseluruhjam").val(total.format("HH:mm"));
}
and here is the updated fiddle https://jsfiddle.net/s9wfh9ye/24/