How to sort table tbodies in html with javascript? - javascript

I'm encountered this problem from my workplace and i kinda feel this table isn't common table for me. I want to sort this table like when i click one of the header, it got sorted from that header category. In example i have this html code:
<html>
<head>
</head>
<body>
<table id="AirflightDetail">
<thead>
<tr>
<th class="col-lg-2 text-center">Airline</th>
<th class="col-lg-2 text-center">Depart</th>
<th class="col-lg-2 text-center">Arrival</th>
<th class="col-lg-2 text-center">Duration</th>
<th class="col-lg-2 text-center">Price</th>
</tr>
</thead>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline X</span>
<br>
<p>AX-006</p>
</td>
<td class="text-center" min-width="100px">
<strong>13:10</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:25</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct</span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$327</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline H</span>
<br>
<p>AH-999</p>
</td>
<td class="text-center" min-width="100px">
<strong>18:30</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>19:45</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline K</span>
<br>
<p>AK-100</p>
</td>
<td class="text-center" min-width="100px">
<strong>12:05</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:20</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>2hour</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
</table>
</body>
</html>
When i click the header title in example Airline, the table got sorted from the airline like:
<html>
<head>
</head>
<body>
<table id="AirflightDetail">
<thead>
<tr>
<th class="col-lg-2 text-center">Airline</th>
<th class="col-lg-2 text-center">Depart</th>
<th class="col-lg-2 text-center">Arrival</th>
<th class="col-lg-2 text-center">Duration</th>
<th class="col-lg-2 text-center">Price</th>
</tr>
</thead>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline H</span>
<br>
<p>AH-999</p>
</td>
<td class="text-center" min-width="100px">
<strong>18:30</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>19:45</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline K</span>
<br>
<p>AK-100</p>
</td>
<td class="text-center" min-width="100px">
<strong>12:05</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:20</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>2hour</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline X</span>
<br>
<p>AX-006</p>
</td>
<td class="text-center" min-width="100px">
<strong>13:10</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:25</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct</span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$327</strong>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I've already seen many javascript sort the table but it only sort the element of tbody or but i never seen any javascript that can sorting the tbody. How can i do that with javascript and without jquery

There is a bunch of stuff involved on this one.
First of all you have to attach event listeners to all your thead th items so when they are clicked they'll perform the sort action.
var airFlightTable = document.querySelector("#AirflightDetail");
var tableHeaders = airFlightTable.querySelectorAll("thead tr th");
tableHeaders.forEach(function(tableHeader){
tableHeader.addEventListener("click", onTableHeaderClick);
});
When click happens you start the sort process by gathering all tbody tags and manipulate their DOM.
function onTableHeaderClick(event){
var sortBy = event.currentTarget.innerHTML;
if(sortBy === 'Airline'){
airFlightTable.querySelectorAll(".table-result-list").forEach(function(tableResultsLIst){
var items = [].slice.call(tableResultsLIst.querySelectorAll("td"));
var sortedItems = items.sort(); //you can place your sort logic here and after you're done you have to replace items of current tbody with sorted ones
});
}
}
There is some work left for you, but you should be fine from this point. Here is a JSBin with this implementation

Related

Copy Paste multiple rows from CSV to input fields in an HTML Form

I am trying to copy paste data from a CSV file to an HTML form using Jquery. My form has an array of input fields so I can do multiple inserts at the same time on submit
Now, suppose I copy paste multiple rows from a CSV file to the second column of the first row in the form, the first row of the form shows data correctly but in the second row, the data pasted starts from the first column itself, wherein it should start from the second row as it did on the first row of the form
CSV rows and cells
1 4 a
2 5 b
3 6 c
Screenshot
function csv_paste_datagrid(event){
$(document).ready(function() {
$('input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().parent().parent().parent().parent().next().find('input');
} else{
input = input.parent().parent().parent().parent().parent().parent().next().find('input').first();
}
}
}, 0);
});
});
HTML
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<table style="display : inline;width : 100%;"></table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[1]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[1]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" style="" value="Back" onclick="" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" style="" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" onclick="" style="" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Right, I had to clear a few double ids from your HTML first and also added a class attribute (contTD) to your "main" container <td>s. After that the whole thing fell into place fairly easily:
to prevent the actual TSV text from being pasted directly into the first input field I used e.preventDefault()
I then used .split() twice on the TSV string to turn it into the 2D array vals
I identified the .closest() td.contTD element (--> td) and its column and row numbers (col and row) by finding the .index() of td and its parent row.
starting form the .closest('tbody')I then worked my way down again through the .slice()of rows starting with row and its (sliced) child input elements starting at column col.
in an .each() loop I then assigned the value of the vals-array to the input element, but only if val[i][j] exists!
There could be further improvements to the script, as it will run trhough all <tr>s of the table from row row to the end. But I hope this is a starting point for you and has given you a few more ideas on how to work with jquery.
In my script I used a delegated paste-event-binding to the <form> element. This should work well with a dynamic table. I did not pack it into an extra function. But, of course, when you use it in your site it should be placed in your onload section.
And lastly: in my second .split() I am looking for a tab character as column separator, so this example will work with a TSV file format. If you want to apply it on space or comma separated values you should adapt the regular expression there to something like /\s/ or /,/ .
$('form').on('paste', 'input', function (e) {
e.preventDefault(); // do not paste the contents into the first cell ...
// convert TSV from clipboard into a 2D array:
let vals=event.clipboardData.getData('text').trim().split(/\r?\n */).map(r=>r.split(/\t/));
let td=$(this).closest('.contTD'); // closest container TD and work from there
let col=td.index(), row=td.parent().index(), tbdy=td.closest('tbody');
// modify input fields of rows >= row and columns >= col:
tbdy.children('tr').slice(row).each((i,tr)=>{
$(tr).find('td input:text').slice(col).each((j,ti)=>{
if(vals[i]&&vals[i][j]!=null) ti.value=vals[i][j] }
)});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<label>sample data for copying and pasting via clipboard:</label>
<table>
<tr><td>1</td><td>4</td><td>a</td></tr>
<tr><td>2</td><td>5</td><td>b</td></tr>
<tr><td>3</td><td>6</td><td>c</td></tr>
</table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value="01"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value="02"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value="03"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[1]">
<table>
<tbody>
<tr id="tr_validation_options[1]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value="04"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[1]">
<table>
<tbody>
<tr id="tr_validation_display[1]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value="05"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[1]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value="06"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" value="Back" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>

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>

Issues with ui bootstrap modal CSS and printing

I am creating a webpage using angularjs and ui bootstrap to create modals. Then I have javascript to print just the modal. However, I am having an issue with my CSS. Firstly, for some reason (most likely because my CSS is messed up) the text is extending outside the div they belong in. Specifically, the ingredients and nutrition facts within the div with the class "onerow" are extending below the div with the class "modal-body".
Here is the plunker: http://plnkr.co/edit/fxvD6MTvbEHsaonLR669?p=preview
Furthermore, I have some javascript to print just the modal pane. It seems to work except for the fact that for some reason the thick solid black borders in the nutrition facts become borders with rounded corners. Again, refer to the plunker to better see what I am talking about.
Here is the html that makes up the modal:
<div class="modal-header" id="modalHeader" style="text-align: center;">
<h3 class="modal-title">PLU# {{productData.PLU}} -- {{productData.Dept}}</h3>
</div>
<div class="modal-body" id="modalBody">
<div ng-show="!pluValid" style="text-align:center;">
PLU {{productData.PLU}} not found in Database
</div>
<div class="onerow" ng-show="pluValid">
<div class="col6">
<div style="text-align: center;">{{productData.Desc1}} {{productData.Desc2}}</div>
<br />
<br />
Ingredients:
<br />
{{productData.Ingredients}}
<br />
<br />
<br />
<div style="text-align: center;">
<b>UPC NUMBER</b>
<br />
{{productData.UPC}}
</div>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="!areFacts">
<table style="width:100%;" cellspacing:0 cellpadding:0>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts</td>
</tr>
<tr>
<td style="text-align: center;">N/A</td>
</tr>
</tbody>
</table>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="areFacts">
<table style="width:100%;" cellspacing:0; cellpadding:0;>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts<br /><br /></td>
</tr>
<tr>
<td>
Serving Size {{productData.ServSize}}
<br />
Servings Per Container {{productData.ServPer}}
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<div class="line">Amount Per Serving</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Calories
<div class="weight">{{productData.Calories}}</div>
</div>
<div style="padding-top: 1px; float: right;" class="labellight">Calories from Fat
<div class="weight">{{productData.CaloriesFat}}</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<br />
<div class="dvlabel" style="text-align: right;">% Daily Value<sup>*</sup></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Fat
<div class="weight">{{productData.TotalFat}}g</div>
</div>
<div class="dv">{{productData.PerFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Saturated Fat
<div class="weight">{{productData.SatFat}}g</div>
</div>
<div class="dv">{{productData.PerSatFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Trans Fat
<div class="weight">{{productData.TransFat}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Cholesterol
<div class="weight">{{productData.Cholesterol}}mg</div>
</div>
<div class="dv">{{productData.PerCholesterol}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Sodium
<div class="weight">{{productData.Sodium}}mg</div>
</div>
<div class="dv">{{productData.PerSodium}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Carbohydrates
<div class="weight">{{productData.Carbs}}g</div>
</div>
<div class="dv">{{productData.PerCarbs}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Dietary Fiber
<div class="weight">{{productData.Fiber}}g</div>
</div>
<div class="dv">{{productData.PerFiber}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Sugars
<div class="weight">{{productData.Sugars}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">
Protein
<div class="weight">{{productData.Protein}}g</div>
</div>
</div>
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" class="vitamins">
<tbody>
<tr>
<td>Vitamin A {{productData.VitA}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin C {{productData.VitC}}%</td>
</tr>
<tr>
<td>Calcium {{productData.Calc}}%</td>
<td style="text-align: center;">•</td>
<td>Iron {{productData.Iron}}%</td>
</tr>
<tr>
<td>Vitamin D {{productData.VitD}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin E {{productData.VitE}}%</td>
</tr>
<tr>
<td>Thiamine {{productData.Thia}}%</td>
<td style="text-align: center;">•</td>
<td>Riboflavin {{productData.Ribo}}%</td>
</tr>
<tr>
<td>Niacin {{productData.Niac}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B6 {{productData.VitB6}}%</td>
</tr>
<tr>
<td>Folate {{productData.Folate}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B12 {{productData.VitB12}}%</td>
</tr>
<tr>
<td>Biotin {{productData.Biotin}}%</td>
<td style="text-align: center;">•</td>
<td>Phosphorus {{productData.Phos}}%</td>
</tr>
<tr>
<td>Zinc {{productData.Zinc}}%</td>
<td style="text-align: center;">•</td>
<td>Magnesium {{productData.Mag}}%</td>
</tr>
<tr>
<td>Iodine {{productData.Iodine}}%</td>
<td style="text-align: center;">•</td>
<td>Copper {{productData.Copper}}%</td>
</tr>
<tr>
<td>Pantothenic Acid {{productData.Acid}}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="labellight">
*Percent Daily Values are based on a 2000 calories diet. Your daily values may be higher or lower depending on your calories needs.
<table border=0 width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="30%"> </td>
<td width="30%">Calories:</td>
<td width="20%" style="text-align:left">2000</td>
<td width="20%" style="text-align:left">2000</td>
</tr>
</table>
</div>
</div>
<div class="line labellight" style="width: 100%;">
<table border=0 cellspacing="0" cellpadding="0" style="width: 100%">
<tr>
<td width="30%">Total Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">65<i>g</i></td>
<td width="20%" style="text-align:left">80<i>g</i></td>
</tr>
<tr>
<td width="30%">Sat Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">20<i>g</i></td>
<td width="20%" style="text-align:left">25<i>g</i></td>
</tr>
<tr>
<td width="30%">Cholesterol</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
</tr>
<tr>
<td>Sodium</td>
<td>Less Than</td>
<td style="text-align:left">2400<i>mg</i></td>
<td style="text-align:left">2400<i>mg</i></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">Total Carbohydrates</td>
<td style="text-align:left">300<i>g</i></td>
<td style="text-align:left">375<i>g</i></td>
</tr>
<tr>
<td colspan="2"> Dietary Fiber</td>
<td style="text-align:left">25<i>g</i></td>
<td style="text-align:left">30<i>g</i></td>
</tr>
</table>
<div class="line">
Calories per gram:
<br />
Fat 9 - Carbohydrate 4 - Percent 4
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" ng-click="print()">Print</button>
<button class="btn btn-primary" type="button" ng-click="close()">Close</button>
</div>
The problem is the table content requires more then the div width.
A very simple fix to start with is using the overflow CSS property in the #nutritionfacts div.
#nutritionfacts {
border: 1px solid black;
padding: 3px;
font-family: 'Arial Black', sans-serif;
overflow: scroll;
}
As for the modal border-radius problem, you need to override the default .modal-content class which in bootstrap styles has a border-raidius: 6px rule.

Jquery using class in table get data for google dynamic remarketing tag

Im trying to pull out the data and put it in arrays with jquery for google dynamic remarketing tag.
using the css class
gr_row
values---
ecomm_prodid
ecomm_quantity
ecomm_totalvalue
Then insert them like so, if there are multiple values, if only one then no array and remove curreny symbol.
<!-multiple products in cart-->
<script type="text/javascript">
var google_tag_params =
ecomm_prodid: ["123","234"],
ecomm_pagetype: "basket",
ecomm_totalvalue: [100,50]
};
</script>
<!-single product in cart-->
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: 234,
ecomm_pagetype: "purchase",
ecomm_totalvalue: 120.99
};
</script>
Any help appreciated thanks
google instructions add dynamic remarketing tag
<table class="checkout-cart" border="0" cellpadding="3" cellspacing="2" width="650">
<tbody>
<tr>
<th "="" align="left" width="15%">REF</th>
<th align="left" width="45%">DESCRIPTION</th>
<th align="right" width="10%">QUANTITY</th>
<th align="right" width="10%">PRICE</th>
<th align="right" width="10%">COST</th>
<th align="center" width="10%">REMOVE</th>
</tr>
<tr class ="gr_row">
<td colspan="3" class="cart"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="ecomm_prodid" width="77"> 83 </td>
<td valign="middle" width="43"><actinic:thumbnail></actinic:thumbnail></td>
<td width="242">some product</td>
<td align="right" class="ecomm_quantity" width="87"><input size="4" name="Q_0" value="1" style="text-align: right;" type="TEXT"></td>
</tr>
</tbody>
</table></td>
<td align="right" class="ecomm_totalvalue"> £5.79 </td>
<td align="right" class="ecomm_totalvalue"> £5.79 </td>
<td rowspan="1" class="cart" align="center"><input name="D_0" type="CHECKBOX"></td>
</tr>
<tr>
<td colspan="3" class="cart"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="ecomm_prodid" width="78"> 3571 </td>
<td valign="middle" width="43"><actinic:thumbnail></actinic:thumbnail></td>
<td width="241">another product</td>
<td align="right" class="ecomm_quantity" width="87"><input size="4" name="Q_1" value="5" style="text-align: right;" type="TEXT"></td>
</tr>
</tbody>
</table></td>
<td class="cart" align="right"> £6.90 </td>
<td class="cart" align="right"> £6.90 </td>
<td rowspan="1" class="cart" align="center"><input name="D_1" type="CHECKBOX"></td>
</tr>
<tr>
<td colspan="4" align="right"><b>Subtotal</b></td>
<td class="cart" align="right">£12.69</td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
<tr>
<td colspan="4" align="right"><b>VAT</b></td>
<td class="cart" align="right">£2.54</td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
<tr>
<td colspan="4" align="right"><b>Total</b></td>
<td class="cartheading" align="right"><b>£15.23</b></td>
<td rowspan="NETQUOTEVAR:REMOVEROWSPAN" align="center"> </td>
</tr>
</tbody>
</table>

Add Horizontal Scroll in Jquery Mobile Table?

I have the following markup,
<table class="ui-responsive table-stroke ui-table ui-table-columntoggle"
data-mode="columntoggle" data-role="table" style=
"overflow-x: scroll !important;">
<thead>
<tr>
<th class="ui-table-priority-6" data-colstart="1"
data-priority="6" style="font-weight: bold;">SL</th>
<th class="ui-table-priority-6" data-colstart="2"
data-priority="6" style="font-weight: bold;">Cat</th>
<th class="ui-table-priority-6" data-colstart="3"
data-priority="6" style="font-weight: bold;">Brand</th>
<th class="ui-table-priority-6" data-colstart="4"
data-priority="6" style="font-weight: bold;">Product</th>
<th class="ui-table-priority-persist" data-colstart="5"
data-priority="persist" style="font-weight: bold;">Item
Code</th>
<th class="ui-table-priority-persist" data-colstart="6"
data-priority="persist" style="font-weight: bold;">Model
Number</th>
<th class="ui-table-priority-6" data-colstart="7"
data-priority="6" style="font-weight: bold;">Bundle Value</th>
<th class="ui-table-priority-persist" data-colstart="8"
data-priority="persist" style="font-weight: bold;">Old RSP</th>
<th class="ui-table-priority-persist" data-colstart="9"
data-priority="persist" style="font-weight: bold;">Promo
RSP</th>
<th class="ui-table-priority-6" data-colstart="10"
data-priority="6" style="font-weight: bold;">Reduced %age</th>
<th class="ui-table-priority-6" data-colstart="11"
data-priority="6" style="font-weight: bold;">Start Date</th>
<th class="ui-table-priority-6" data-colstart="12"
data-priority="6" style="font-weight: bold;">Vendor End
Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-table-priority-6">
<p>A115</p>
</td>
<td class="ui-table-priority-6">
<p>SDA</p>
</td>
<td class="ui-table-priority-6">
<p>Panasonic</p>
</td>
<td class="ui-table-priority-6">
<p>Blender</p>
</td>
<td class="ui-table-priority-persist">
<p>11651099</p>
</td>
<td class="ui-table-priority-persist">
<p>MXAC400</p>
</td>
<td class="ui-table-priority-6">
<p>GV 50</p>
</td>
<td class="ui-table-priority-persist">
<p><strong> 399</strong></p>
</td>
<td class="ui-table-priority-persist">
<p>
<strong> 399</strong></p>
</td>
<td class="ui-table-priority-6">
<p>0%</p>
</td>
<td class="ui-table-priority-6">
<p>Feb 26th</p>
</td>
<td class="ui-table-priority-6">
<p>Mar 8th</p>
</td>
</tr>
<tr>
<td class="ui-table-priority-6">
<p>C073</p>
</td>
<td class="ui-table-priority-6">
<p>SDA</p>
</td>
<td class="ui-table-priority-6">
<p>Tefal</p>
</td>
<td class="ui-table-priority-6">
<p>Fryer</p>
</td>
<td class="ui-table-priority-persist">
<p>11480473</p>
</td>
<td class="ui-table-priority-persist">
<p>FZ700072</p>
</td>
<td class="ui-table-priority-6">
<p>PB</p>
</td>
<td class="ui-table-priority-persist">
<p><strong>999</strong></p>
</td>
<td class="ui-table-priority-persist">
<p><strong> 749</strong></p>
</td>
<td class="ui-table-priority-6">
<p>25%</p>
</td>
<td class="ui-table-priority-6">
<p>Mar 1st</p>
</td>
<td class="ui-table-priority-6">
<p>Will Revert</p>
</td>
</tr>
</tbody>
</table>
Can I add a horizontal markup? So that users can easily scroll right and left
You can wrap your table with div like:
<div style="width: 100%; height: 400px; overflow: auto">
<table>
<!-- table content -->
</table>
</div>
If table > window width scroll will be visible dy default.
Check CSS styles and js (jQuery Mobile can fixed the table to window width)
Also you can use div container, for example:
<div style="width:300px;overflow:auto">
<table>...</table>
</div>
The answers above worked for me; however, I didn't want to specify explicit widths or heights, so the following solved the problem even better:
<div style="overflow-x: auto;">
<table [...] </table>
</div>

Categories