I currently have a regex function that finds all matches of a word within html on a page and replaces that with a string that includes html(essentially places a span around it with a highlight CSS class).
It is working as intended but is missing most matches in some areas and I can't point out why it would miss matches in other areas considering there is no difference in the html. I will bold which word matches it would hit in a scenario and which it wouldn't I would leave italicized.
Lets say the word given that I want matched in the formula is "income"
<p> This is the **income**of your **income** welcome to the **income**</p>
<p> Loren ipsum loren ipsum Loren ipsum loren ipsum Loren ipsum loren income Loren ipsum loren ipsum *income* Loren ipsum loren ipsum Loren ipsum loren ipsum Loren ipsum loren ipsum **income**. </p>
sometimes it will match with an instance of the word 'income' in one page refresh and others it will not. Very strange.
Here is the listed Regex that I am using below
const regex = new RegExp('<(?!th)[^>]*>[^<]*(\\b' + wordToMatch + '\\b)', 'gi');
Currently its doing what is intended which is
ignoring any inline text within a th tag
capturing only the whole word
capturing more than one instance of the word (but missing some instances)
capturing only text in-between tags
case insensitive
If anyone has any theories I am open to hear them! and yes I know there are better ways than using Regex.
function highlight() {
var lastSearch = "The income";
var inputText = $('.component.content');
if (lastSearch) {
lastSearch = lastSearch.split(' ');
for (var index in lastSearch) {
var MatchedWord = lastSearch[index];
if (MatchedWord.length > 2 && inputText && inputText.length > 0) {
var innerHTML = inputText[0].innerHTML;
var doesTermExist = innerHTML.toLowerCase().indexOf(MatchedWord.toLowerCase());
if (doesTermExist >= 0) {
const regex = new RegExp('<(?!th)[^>]*?>[^<]*(\\b' + MatchedWord + '\\b)', 'gi');
$('.component.content').first().html($('.component.content').first().html().replace(regex,
function(match, capture) {
return match.substr(0, match.length - capture.length) + "<span class='document-highlight'>" + capture + "</span>"
}));
}
}
}
}
}
window.addEventListener('DOMContentLoaded', highlight);
.document-highlight {
font-weight: 700;
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../JS_Sitecore_ScratchPAge/eroc.css">
<link/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
<html>
<body>
<div class="component title">
<div class="component-content">
<h1 class="field-title">Wet vs. Dry Funding States</h1>
</div>
</div>
<div class="component content">
<div class="component-content">
<div class="field-content">
<div class="row">
<div class="col-12 container">
<h2></h2>
</div>
</div>
<table class="table-complex primary" style="text-align: center;">
<thead>
<tr class="primary-type">
<th colspan="2">WET FUNDING STATES: Funds are sent on date of Closing or date of disbursement<br />
</th>
</tr>
</thead>
<tbody>
<tr class="data">
<td><span style="text-align: center;">Alabama</span></td>
<td> <span style="text-align: center;">Nebraska</span></td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Arkansas</span></td>
<td><span style="text-align: center;">New Hampshire</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Colorado</span></td>
<td><span style="text-align: center;">New Jersey</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Connecticut</span></td>
<td><span style="text-align: center;">New Mexico (purchases)</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Delaware</span></td>
<td><span style="text-align: center;">New York</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">District of Columbia</span></td>
<td><span style="text-align: center;">North Carolina</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Florida</span></td>
<td> <span style="text-align: center;">North Dakota</span></td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Georgia</span></td>
<td><span style="text-align: center;">Ohio</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Illinois</span></td>
<td><span style="text-align: center;">Oklahoma</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Indiana</span></td>
<td><span style="text-align: center;">Pennsylvania</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Iowa</span></td>
<td><span style="text-align: center;">Rhode Island</span></td>
</tr>
<tr class="data">
<th>income income the welcome to the jungle</th>
<td> <span style="text-align: center;">Kansas</span></td>
<td><span style="text-align: center;">South Carolina</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Kentucky</span></td>
<td><span style="text-align: center;">South Dakota</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Louisiana</span></td>
<td><span style="text-align: center;">The</span> </td>
<td><span style="text-align: center;">further</span> </td>
<td><span style="text-align: center;">th</span> </td>
<td><span style="text-align: center;">furthe</span> </td>
<td><span style="text-align: center;">Further</span> </td>
<td><span style="text-align: center;">the further</span> </td>
<td><span style="text-align: center;">Tennessee</span> </td>
<td><span style="text-align: center;">Tennessee</span> </td>
</tr>
<tr class="data">
<td><span style="text-align: center;">Maine</span> </td>
<td><span style="text-align: center;">Utah</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Maryland</span></td>
<td><span style="text-align: center;">Texas</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Massachusetts</span></td>
<td><span style="text-align: center;">Vermont</span> </td>
</tr>
<tr class="data">
<td><span style="text-align: center;">Michigan</span> </td>
<td><span style="text-align: center;">Virginia</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Minnesota</span></td>
<td> <span style="text-align: center;">West Virginia</span></td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Mississippi</span></td>
<td><span style="text-align: center;">Wisconsin</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Missouri</span></td>
<td><span style="text-align: center;">Wyoming</span> </td>
</tr>
<tr class="data">
<td> <span style="text-align: center;">Montana</span></td>
<td> </td>
<td>
<p>Note that while the Freddie Mac guidance referenced below refers to the selling guide section 5307.1 in relation to securities accounts (stocks, bonds, mutual funds) and depository account (checking/savings), the Fannie Mae guidance is
not written in their selling guide. Only a handful of lenders have received permission to use this income source from Fannie Mae, and it can be a useful tool to qualify the borrower both as a main stream of income or as supplemental
income to solve for minor DTI restructures. This is separate from the Fannie Mae guidelines surrounding employment-related assets and IRA distributions found in section B3-3.1-09.
</p>
</td>
<td>
<p>Assets as income involves reviewing the balance in the borrowers various asset accounts and using a calculation to determine a monthly income that can be used to qualify the loan.</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<table class="table-complex primary" style="text-align: center;">
<thead>
<tr class="primary-type">
<th colspan="2">DRY FUNDING STATES: Funds are sent when the Wire Team receives a funding request from Title/Escrow<br />
</th>
</tr>
</thead>
<tbody>
<tr class="data">
<td><span style="text-align: center;">Alaska</span></td>
<td>Nevada</td>
</tr>
<tr class="data">
<td>Arizona</td>
<td>New Mexico (refinances)</td>
</tr>
<tr class="data">
<td>California</td>
<td>Oregon</td>
<td>The Further</td>
</tr>
<tr class="data">
<td>Idaho</td>
<td>Washington</td>
</tr>
<tr class="data">
<td>Hawaii</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="component content">
<div class="component-content">
</div>
</div>
<div class="component link">
<div class="component-content">
</body>
</html>
Related
$("#zz").click(function() {
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>
<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>
</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
<td class="sorting_1">
<img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th></th>
<th>Established On</th>
<th>Objective</th>
<th>Target Value</th>
<th>Baseline Value</th>
<th>Monitorng mechanism</th>
<th>Target Date</th>
<th>Action Plan</th>
<th>Frequency of Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="add" id="add" src="/Images/add.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th>
Objective Evaluated On
</th>
<th>
Objective Measured Value
</th>
<th>
From Period
</th>
<th>
To Period
</th>
<th>
Trend
</th>
<th>
NCR Ref. (If Objective not achieved)
</th>
<th>
Status of Objective Evaluation
</th>
<th>
Objective Evidence
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
09/07/2019 </td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td>
09/07/2019 </td>
<td>
<p>Not Available</p>
</td>
<td> Annually</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
1
</td>
<td>
<a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
</td>
<td>
2019
</td>
<td>
Department
</td>
<td>
HR DEPARTMENT
</td>
<td>
Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
</td>
<td>
Approved
</td>
<td>
<span class="badge badge-info">No File attached</span>
</td>
<td>
<a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
</td>
<td>
<span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
</td>
</tr>
The above is just an example of a row from my table.
Upon appending $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); on a button click the table becomes visible in the new <tr>
To my extend my knowledge , apparently it's been appended directly to tr since the display is set to none, does the dom elements work like this ?
I'm novice at the most, when it comes to html.
Can Anyone please explain why this happens ?
Any relevant information will greatly appreciated.
Your selection (using html()) returns the contents of the element, not the element itself, so any attributes on the element are also disregarded. One easy fix might be to move your hide styles down a level:
<div id="data_hidden">
<table style="display:none">
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
Demo 1
This leaves the original div element in the DOM, but it doesn't affect appearance.
Alternatively, grab the outerHTML of the selection's raw element:
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>"
+ $(this).next().get(0).outerHTML + "</td></tr>");
});
Demo 2
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
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.
I'd like some help please.
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
When the page loads for the first time I want the table to be collapsed. When I click the Toggle button I want to change the table status, so basically to expand it and collapse it again if the button is clicked again.
This is my script
<script>
$(document).ready(function() {
$('.toggle-btn').closest('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).closest('table').toggle();
});
});
</script>
How can I make this work correct ?
why not just use toggle function directly?
$(document).ready(function() {
$('table').hide();
$('.toggle-btn').on('click', function() {
$('table').toggle();
});
});
if you have only one table then only do
$(document).ready(function() {
$('tbody').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$('tbody').toggle();
});
});
For more then one sibling tables
You can find closest h2 and next() gives you table
$(document).ready(function() {
$('.toggle-btn').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$(this).closest('h2').next().find("tbody").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$('.toggle-btn').parent().next('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().siblings('table').toggle();
});
});
Selector should be $('.toggle-btn').parent().next('table')
DEMO
the function closest() goes up the element's parents, so it will never find the table. You would have to do something like this:
$(document).ready(function() {
$('.toggle-btn').parent().parent().find('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().parent().find('table').toggle();
});
});
But this would not work if there are multiple tables. Consider using an id or for the table, so that you can access it directly. Eg:
<table id="data-table-1" class="data" cellpadding="8" border="1">
That would make the javascript much simpler, ie:
$('.toggle-btn').on('click', function(event) {
$('#data-table-1').toggle();
});
I am using tableclothjs and Twitter Bootstrap. For some reason this code will not appear with the sortable headers like tableclothjs talks about in its API documentation. I've checked the JavaScript console in my web browser and I don't get any warnings or errors.
What could be going on here?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ticket .::. Show View</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Stylesheets -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container" style="text-align: justify; margin-left: auto; margin-right: 360px; margin-top: auto; width: 70%">
<div id="navigation"
style="margin-left: -3%; background-image: url('//static.fiberhop.com:8080/images/logo.png'); background-repeat: no-repeat">
<img src="//static.fiberhop.com:8080/images/logo.png" alt="FiberHop LLC Logo"/>
<span style="vertical-align: -20%; margin-left: 20%; text-align: justify; font-size: 250%; font-style: oblique">
<a>Link 1</a> | <a>Link 2</a> | <a>Link 3</a> | <a>Link 4</a> | <a>Link 5</a>
</span>
</div>
<table class="table table-sortable">
<thead>
<tr>
<th>Ticket ID</th>
<th>Customer ID</th>
<th>Category ID</th>
<th>Assigned</th>
<th>Employee ID</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td> 7</td>
<td> 17</td>
<td> 91</td>
<td style="text-align: center"> </td>
<td> 8239</td>
<td> Ea.</td>
</tr>
<tr>
<td> 13</td>
<td> 86</td>
<td> 41</td>
<td style="text-align: center"> assigned </td>
<td> 7612</td>
<td> Molestias veritatis.</td>
</tr>
<tr>
<td> 16</td>
<td> 24</td>
<td> 59</td>
<td style="text-align: center"> </td>
<td> 7484</td>
<td> Tenetur qui.</td>
</tr>
<tr>
<td> 25</td>
<td> 37</td>
<td> 70</td>
<td style="text-align: center"> assigned </td>
<td> 8060</td>
<td> Alias atque.</td>
</tr>
<tr>
<td> 31</td>
<td> 53</td>
<td> 72</td>
<td style="text-align: center"> </td>
<td> 5159</td>
<td> Non.</td>
</tr>
<tr>
<td> 46</td>
<td> 25</td>
<td> 28</td>
<td style="text-align: center"> assigned </td>
<td> 7827</td>
<td> Repellat.</td>
</tr>
<tr>
<td> 48</td>
<td> 42</td>
<td> 3</td>
<td style="text-align: center"> assigned </td>
<td> 6352</td>
<td> Ratione.</td>
</tr>
<tr>
<td> 50</td>
<td> 76</td>
<td> 3</td>
<td style="text-align: center"> assigned </td>
<td> 8880</td>
<td> Voluptatum magnam.</td>
</tr>
<tr>
<td> 52</td>
<td> 81</td>
<td> 96</td>
<td style="text-align: center"> </td>
<td> 7008</td>
<td> Occaecati reprehenderit.</td>
</tr>
<tr>
<td> 54</td>
<td> 18</td>
<td> 94</td>
<td style="text-align: center"> assigned </td>
<td> 3695</td>
<td> Aut quos.</td>
</tr>
<tr>
<td> 57</td>
<td> 70</td>
<td> 84</td>
<td style="text-align: center"> </td>
<td> 6093</td>
<td> Quod blanditiis.</td>
</tr>
<tr>
<td> 58</td>
<td> 50</td>
<td> 24</td>
<td style="text-align: center"> assigned </td>
<td> 7247</td>
<td> A animi.</td>
</tr>
<tr>
<td> 67</td>
<td> 42</td>
<td> 15</td>
<td style="text-align: center"> assigned </td>
<td> 5166</td>
<td> Aspernatur nihil.</td>
</tr>
<tr>
<td> 68</td>
<td> 41</td>
<td> 100</td>
<td style="text-align: center"> </td>
<td> 7335</td>
<td> Quia.</td>
</tr>
<tr>
<td> 73</td>
<td> 90</td>
<td> 34</td>
<td style="text-align: center"> </td>
<td> 7539</td>
<td> Eveniet.</td>
</tr>
<tr>
<td> 83</td>
<td> 54</td>
<td> 17</td>
<td style="text-align: center"> assigned </td>
<td> 3750</td>
<td> Nulla totam.</td>
</tr>
<tr>
<td> 84</td>
<td> 38</td>
<td> 92</td>
<td style="text-align: center"> assigned </td>
<td> 7408</td>
<td> Exercitationem.</td>
</tr>
<tr>
<td> 88</td>
<td> 21</td>
<td> 26</td>
<td style="text-align: center"> assigned </td>
<td> 5036</td>
<td> Alias consequatur.</td>
</tr>
<tr>
<td> 90</td>
<td> 34</td>
<td> 36</td>
<td style="text-align: center"> assigned </td>
<td> 3672</td>
<td> Neque.</td>
</tr>
<tr>
<td> 91</td>
<td> 22</td>
<td> 36</td>
<td style="text-align: center"> assigned </td>
<td> 8735</td>
<td> Non officia.</td>
</tr>
</tbody>
</table>
<ul class="pager">
<li class="disabled"><span>« Previous</span></li><li>Next »</li> </ul>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.18.3/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("table").tablecloth({
theme: "default",
bordered: true,
condensed: true,
striped: true,
sortable: true,
clean: true,
cleanElements: "th td"
});
});
</script>
</body>
</html>
The tablecloth script appears to be missing from what I'm seeing. This works.
http://jsfiddle.net/bcafj8y0/
Added
<script type="text/javascript" src="http://cdn.lukej.me/jquery.tablecloth/1.0.0/js/jquery.tablecloth.js"></script>