Im downloading page to memo1.text and in this text i need to extract some value's to variables.
necessary part of downloaded code:
<tr>
<td style="text-align: left;">Nazwa1</td>
<td style="text-align: right;"> 88.</td>
<td style="text-align: center;"> 20%</td>
<td style="text-align: right;">86</td>
<td style="text-align: right;">108 h</td>
<td style="text-align: center;"> 1.00000</td>
<td style="text-align: right;">8974296.0</td>
<td style="text-align: center;"> 1.00</td>
</tr>
<tr>
<td style="text-align: left;">Nazwa2</td>
<td style="text-align: right;"> 282</td>
<td style="text-align: center;">---</td>
<td style="text-align: right;">261</td>
<td style="text-align: right;">1:26 h</td>
<td style="text-align: center;"> 0.00212</td>
<td style="text-align: right;"> 312001.9</td>
<td style="text-align: center; color: #00cc00; "> 1.02</td>
</tr>
<tr>
<td style="text-align: left;">Nazwa3</td>
<td style="text-align: right;"> 2747</td>
<td style="text-align: center;">100%</td>
<td style="text-align: right;">1833</td>
<td style="text-align: right;">0:27 h</td>
<td style="text-align: center;"> 0.02239</td>
<td style="text-align: right;"> 364.4</td>
<td style="text-align: center; color: #00cc00; "> 1.19</td>
</tr>
<tr>
<td style="text-align: left;">Nazwa4</td>
<td style="text-align: right;"> 413.6</td>
<td style="text-align: center;">100%</td>
<td style="text-align: right;">281</td>
<td style="text-align: right;">0:6 h</td>
<td style="text-align: center;"> 0.00358</td>
<td style="text-align: right;"> 32812.1</td>
<td style="text-align: center; color: #cc0000; "> 0.78</td>
</tr>
I must extract variable value "1.19" from "Nazwa3" table,
everything in table are variables, only name "nazwa3" is const.
uses
regexpr;
function searchandextract(InputStr : string) : string;
var
R : TRegExpr;
begin
Result := '';
R := TRegExpr.Create;
try
R.Expression := '<td style="text-align: left;">Nazwa3</td>(.+?)"> ([0-9\.]+)</td>(.+?)</tr>';
if R.Exec(InputStr) then
begin
Result := R.Match[2];
end;
finally
R.Free;
end;
end;
Label1.Caption := searchandextract(Memo1.Text);
But result of this function is empty and i dont have any idea why?
Do NOT use regular expression to parse HTML files, rather take a look at an HTML parser library, in delphi you could use DIHtmlParser or htmlp .
Related
I was trying to list some data, the first table may contain first 10 data of the list remaining will show in the next table. I achieve this by looping the same table. But the table is showing different cell width in each page.
The first page shows table like this,
The second page shows the table like this,
The code i used is
<html>
<head>
<style type="text/css" media="print">
#media print {
html, body {
color: black;
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100vh !important;
/* overflow: hidden !important; */
font-size: 15px;
}
#page {
page-break-inside: avoid;
size: A4 landscape;
margin: 10;
}
.footer {
display: table-cell;
vertical-align: bottom;
}
input[type=checkbox], input[type=radio] {
opacity: 1 !important;
}
}
</style>
<style type="text/css">
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="landscape"] {
width: 29.7cm;
height: 21cm;
}
.table-wtotbr {
width: 100%;
}
.table-wtbr {
width: 100%;
}
.table-wtotbr th, td {
border-bottom: 1px solid black;
}
.table-wtbr th, td {
border: 1px solid black;
}
.container-table {
color: black;
width: 100%;
height: 100%;
font-size: 11px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.checkbox {
width:12px;
height:12px;
border: 1px solid #000;
display: inline-block;
}
</style>
</head>
<body>
<%
int rwln = Integer.parseInt(request.getAttribute("rwln").toString());
int cnt = 0;
int cntt = 0;
int listlngth = 9;
int begin = 0;
int mnlpcnt = rwln / 10;
double mlopct = (double) rwln / 10;
%>
<c:set value="<%=cntt%>" var="cntt"></c:set>
<c:set value="<%=cnt%>" var="cnt"></c:set>
<c:set value="<%=mnlpcnt%>" var="mnlpcnt"></c:set>
<c:set value="<%=listlngth%>" var="listlngth"></c:set>
<c:set value="<%=begin%>" var="begin"></c:set>
<!-- getting current date -->
<%
Date dNow = new Date();
SimpleDateFormat ft = new SimpleDateFormat("dd.MM.yyyy");
String cdate = ft.format(dNow);
%>
<!-- /getting current date -->
<jsp:useBean id="today" class="java.util.Date" />
<c:forEach var="kk" begin="0" end="<%=mnlpcnt%>">
<page size="A4" layout="landscape">
<div class="container-table">
<table class="table-wtotbr">
<tr>
<td style="vertical-align: middle; text-align: center;">
<img alt="logo" src="assets/images/logo.png" height="40px">
</td>
<td style="text-align: center; width: 60%; font-size: 20px;">
<b>Comapany</b>
</td>
</tr>
</table>
<table class="table-wtotbr">
<tr height="10px">
<td rowspan="2" style="text-align: center; vertical-align: middle;">Job
Travel Card</td>
<td style="widtd: 10%;">JTC No:<%=request.getAttribute("jtcnum")%></td>
</tr>
<tr height="10px">
<td>Date</td>
</tr>
</table>
<table class="table-wtotbr">
<tr height="10px">
<td style="text-align: left; font-size: 8px;" colspan="2">Project
Number: <%=request.getAttribute("prjnno")%> </td>
<td style="text-align: left; font-size: 8px;" colspan="2">Unit
No. / Tag No.:</td>
</tr>
<tr height="10px">
<td style="text-align: left;" colspan="3">Area Number:</td>
<td style="text-align: left;">Material Class: <%=request.getAttribute("mclass")%></td>
</tr>
<tr height="10px">
<td style="text-align: left;">Drawing No: / ISO Number: <%=request.getAttribute("drwno")%></td>
<td style="text-align: left;" widtd="25%">JC No: <%=request.getAttribute("miv")%></td>
<td style="text-align: left;">Sheet No:</td>
<td style="text-align: left;">Rev. No.:</td>
</tr>
<tr height="10px">
<td style="text-align: left; font-size: 8px;">Item Description:</td>
<td style="text-align: left; font-size: 8px;" colspan="3">ITP
Stage Nos.:</td>
</tr>
</table>
<!-- Fitup data table-sm -->
<table class="table-wtbr">
<tr height="10px">
<td rowspan="12" style="text-align: center; vertical-align: middle;">
<span class="verticaltext"> Fabrication Assembly Fit-Up </span>
</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Weld/joint
No</td>
<td colspan="2" style="text-align: center;">Material Spec Grade</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Size</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Thickness</td>
<td colspan="2" style="text-align: center;">Heat/Plate/TestNo</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Welder
No. for tracking</td>
<td colspan="2" style="text-align: center;">Fitup Result</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Date</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2" width="5%">Sign</td>
</tr>
<tr height="10px">
<td style="text-align: center; font-size: 8px;" width="10%">Material
1</td>
<td style="text-align: center; font-size: 8px;" width="10%">Material
2</td>
<td style="text-align: center; font-size: 8px;" width="10%">Material
1</td>
<td style="text-align: center; font-size: 8px;" width="10%">Material
2</td>
<td style="text-align: center; font-size: 8px;">Accept</td>
<td style="text-align: center; font-size: 8px;">Reject</td>
</tr>
<c:choose>
<c:when test="${mnlpcnt <1 }">
<c:forEach var="jdata" items="${jtcdata}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;" width="7%">${jdata.getJointno()}</td>
<td style="text-align: center;" width="7%">${jdata.getItem1()}</td>
<td style="text-align: center;" width="7%">${jdata.getItem2()}</td>
<td style="text-align: center;" width="7%">${jdata.getDia()}</td>
<td style="text-align: center;" width="7%">${jdata.getThick()}</td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
</tr>
</c:forEach>
</c:when>
<c:when test="${mnlpcnt >= 1 }">
<c:forEach var="qq" begin="${begin}" end="${listlngth}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;">${jtcdata[qq].getJointno()}</td>
<td style="text-align: center;">${jtcdata[qq].getItem1()}</td>
<td style="text-align: center;">${jtcdata[qq].getItem2()}</td>
<td style="text-align: center;">${jtcdata[qq].getDia()}</td>
<td style="text-align: center;">${jtcdata[qq].getThick()}</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</c:forEach>
</c:when>
</c:choose>
<tr>
<td colspan="5" style="font-size: 10px;">Name & Signature of
fabrication foreman</td>
<td colspan="2" style="font-size: 10px;">Released to</td>
<td colspan="1" style="font-size: 10px;">
<div class="checkbox"></div>
QC/NDE/DIM.</td>
<td colspan="3" style="font-size: 10px;"><div class="checkbox"></div>
Welding</td>
<td colspan="4" style="font-size: 10px;"><div class="checkbox"></div>
Fabrication/Assembly</td>
</tr>
<tr>
<td colspan="7" style="font-size: 10px;">Date</td>
<td colspan="7" style="font-size: 10px;">Date</td>
</tr>
</table>
<!-- welding data -->
<table class="table-wtbr">
<tr heigth="10px">
<td rowspan="13" style="text-align: center; vertical-align: middle;">
<span class="verticaltext"> Welding Details </span>
</td>
<td style="text-align: center; vertical-align: middle;" width="7%"
rowspan="3">Joint No</td>
<td style="text-align: center; vertical-align: middle;" rowspan="3"
width="15%">WPS No.</td>
<td colspan="3" style="text-align: center;">Welding Process</td>
<td colspan="3" style="text-align: center;">Welder/Operation
No.</td>
<td colspan="2" rowspan="2"
style="text-align: center; vertical-align: middle;">Visual
Inspection</td>
<td style="text-align: center; vertical-align: middle;" rowspan="3"
width="5%">Date</td>
<td style="text-align: center; vertical-align: middle;" rowspan="3"
width="5%">Sign</td>
</tr>
<tr heigth="10px">
<td colspan="3" style="text-align: center;">Passes</td>
<td colspan="3" style="text-align: center;">Passes</td>
</tr>
<tr heigth="10px">
<td style="text-align: center; font-size: 8px;" width="10%">Root/Hot</td>
<td style="text-align: center; font-size: 8px;" width="10%">Fill</td>
<td style="text-align: center; font-size: 8px;" width="10%">Cap</td>
<td style="text-align: center; font-size: 8px;" width="10%">Root/Hot</td>
<td style="text-align: center; font-size: 8px;" width="10%">Fill</td>
<td style="text-align: center; font-size: 8px;" width="10%">Cap</td>
<td style="text-align: center; font-size: 8px;" width="4%">Accept</td>
<td style="text-align: center; font-size: 8px;" width="4%">Reject</td>
</tr>
<c:choose>
<c:when test="${mnlpcnt <1 }">
<c:forEach var="jdata" items="${jtcdata}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;">${jdata.getJointno()}</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</c:forEach>
</c:when>
<c:when test="${mnlpcnt >= 1 }">
<c:forEach var="pp" begin="${begin}" end="${listlngth}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;">${jtcdata[pp].getJointno()}</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</c:forEach>
</c:when>
</c:choose>
<tr>
<td colspan="4" style="font-size: 10px;">Name & Signature of
fabrication foreman</td>
<td colspan="2" style="font-size: 10px;">Released to</td>
<td colspan="1" style="font-size: 10px;"><div class="checkbox"></div>
QC/NDE/DIM.</td>
<td colspan="2" style="font-size: 10px;"><div class="checkbox"></div>
Welding</td>
<td colspan="5" style="font-size: 10px;"><div class="checkbox"></div>
Fabrication/Assembly</td>
</tr>
<tr>
<td colspan="14" style="font-size: 10px;">Name & Signature of
QC Personel</td>
</tr>
<tr>
<td colspan="7" style="font-size: 10px;">Date</td>
<td colspan="7" style="font-size: 10px;">Date</td>
</tr>
</table>
<div class="footer">
<div style="float: left;">
<!--
<%=request.getAttribute("prjnno")%>-JTC-<%=request.getAttribute("jtcnum")%>-PIP-REV-01
-->
10636-JTC-276-PIP-REV-01
</div>
<div style="float: right;">
<%=cdate%>
</div>
</div>
</div>
</page>
<%
begin = listlngth+1;
listlngth = listlngth+9;
%>
<c:set value="<%=listlngth%>" var="listlngth"></c:set>
<c:set value="<%=begin%>" var="begin"></c:set>
</c:forEach>
</body>
</html>
Can anyone help me to solving this issue.
Thank you in advance.
Mysql regex equivalent for this pattern:
<table (.+)width:(.+)px
I tried putting this pattern in my query but it will still hit items that doesn't have the pattern.
I use this site to check if the item hits that pattern above:
https://regex101.com/
This is my query:
select * from wp_posts where post_content regexp '<table (.+)width:(.+)px';
This is the my sample post_content that is correct:
<table class="table-schedule" style="width: 737px;">
<tbody>
<tr>
<th>営業時間</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th class="holiday">土</th>
<th class="holiday">日</th>
<th class="holiday">祝</th>
</tr>
<tr>
<td>11:00～19:00</td>
<td class="weekday maru">○</td>
<td class="weekday maru">休</td>
<td class="weekday maru">○</td>
<td class="weekday maru">○</td>
<td class="weekday maru">○</td>
<td class="holiday">○</td>
<td class="holiday">○</td>
<td class="holiday">○</td>
</tr>
</tbody>
</table>
This is the other sample post_content that is wrong. That will still hit even though there's no width on the table:
<table class="table-schedule">
<tbody>
<tr>
<th>営業時間</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th class="holiday">土</th>
<th class="holiday">日</th>
<th class="holiday">祝</th>
</tr>
<tr>
<td style="text-align: center;">
<p>11:00～19:00</p>
</td>
<td class="weekday maru" style="text-align: center;">○</td>
<td class="weekday maru" style="text-align: center;">休</td>
<td class="weekday maru" style="text-align: center;">○</td>
<td class="weekday maru" style="text-align: center;">休</td>
<td class="weekday maru" style="text-align: center;">○</td>
<td class="holiday" style="text-align: center;">休</td>
<td class="holiday" style="text-align: center;">休</td>
<td class="holiday" style="text-align: center;">休</td>
</tr>
<tr>
<td style="text-align: center;">
<p>11:00～17:00</p>
</td>
<td style="text-align: center;">休</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">休</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">休</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">休</td>
<td style="text-align: center;">休</td>
</tr>
</tbody>
</table>
Note: mysql version 5.6
While your current regex pattern is valid, it won't behave the way you want, because the (.+) terms might match across tags. Try this version:
SELECT *
FROM wp_posts
WHERE post_content REGEXP '<table [^>]+width: [0-9]+px';
Demo
I'm having some grief with tables I'm trying to set up in WordPress. Have a look here - the page looks OK when at a normal desktop width (say 1000px), but when you narrow it down below about 750px, the tables start repeating information for no apparent reason. I've flicked through my CSS and through my tables themselves and can't seem to find any immediate reason why. This is only a problem for when mobile users try to view the page.
One of the tables is as follows.
<table style="height: 25px;" border="1" width="673" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>WEEK</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>PRICE</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>AVAILABLE</strong></em></td>
</tr>
</tbody>
</table>
<table style="height: 120px;" border="1" width="673" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong> 3rd Jan to 10th Jan</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>Available </strong></em></td>
</tr>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>10th Jan to 17th Jan</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong> <strong><em>Available </em></strong></strong></em></td>
</tr>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>17th Jan to 24th Jan</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong> <strong><em>Available </em></strong></strong></em></td>
</tr>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>24th Jan to 31st Jan</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><span style="color: #ff0000;"><em><strong> <span style="color: #000000;"><strong><em>Available </em></strong></span></strong></em></span></td>
</tr>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><b><i>31st Jan to 7th Feb</i></b></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong> <span style="color: #ff0000;"><strong><em>BOOKED</em></strong></span></strong></em></td>
</tr>
</tbody>
</table>
Any ideas why this might be doing this?
It's hard to know for sure without seeing your CSS, but there will be a breakpoint set for 785px that displays elements with class 'pinned', making the duplicate table entries appear.
try:
#media all max-width: 785px {
.pinned {
display:none !important;
}
}
Hello I was wondering if it's possible with a css table to have alternating colour rows? I would like it to look like this,
http://i.imgur.com/zT04atv.jpg
My code so far for the table is this. I have tried but just can't seem to get it to work. Is this possible? And if so how would I implement it? Thanks.
<table style="height: 448px;" width="1007">
<tbody>
<tr>
<td style="text-align: center;">
<p>Pricing</p>
<p>Structure</p>
</td>
<td style="text-align: center;">
<p>Professional</p>
<p>Resume</p>
<p>$199</p>
</td>
<td style="text-align: center;">
<p>Managerial</p>
<p>Resume</p>
<p>$299</p>
</td>
<td style="text-align: center;">
<p>Executive</p>
<p>Resume</p>
<p>$399</p>
</td>
<td style="text-align: center;">
<p>C-Suite</p>
<p>Resume</p>
<p>$499</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Resume Specs</td>
<td style="text-align: center;">2-3 pg resume</td>
<td style="text-align: center;">4-5 pg resume</td>
<td style="text-align: center;">
<p>+ cover sheet and</p>
<p>graphics</p>
</td>
<td style="text-align: center;">+ standalone bio pg</td>
</tr>
<tr>
<td style="text-align: center;">Phone Interview</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">
<p>Tick</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Draft To Approve</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
</tr>
<tr>
<td style="text-align: center;">Template Options</td>
<td style="text-align: center;"> </td>
<td style="text-align: center;"> </td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
</tr>
<tr>
<td style="text-align: center;">Extras</td>
<td style="text-align: center;"> </td>
<td style="text-align: center;"> </td>
<td style="text-align: center;">
<p>+ Free LinkedIn</p>
<p>profile</p>
</td>
<td style="text-align: center;">
<p>+ Free LinkedIn</p>
<p>profile</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Delivery</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Cover Letter</td>
<td style="text-align: center;">+ $50</td>
<td style="text-align: center;">+ $50</td>
<td style="text-align: center;">+ $50</td>
<td style="text-align: center;">+ $50</td>
</tr>
<tr>
<td style="text-align: center;">
<p>If your not sure where</p>
<p>your job would fit, please</p>
<p>get in touch to discuss </p>
<p>your arrangements</p>
</td>
<td style="text-align: center;">
<p>Vocations (such as</p>
<p>teaching & nursing)</p>
<p>Early career professionals</p>
</td>
<td style="text-align: center;">
<p>Managers and Senior</p>
<p>professionals (lawyers,</p>
<p>medical doctors), BDM's</p>
<p>consultants...</p>
</td>
<td style="text-align: center;">
<p>Senior Managers and Exec</p>
<p>Directors (Operations</p>
<p>Managers, GMs, Head of</p>
<p>Department</p>
</td>
<td style="text-align: center;">
<p>CEOs, CFOs, COOs, CIOs,</p>
<p>Managing Directors, Board</p>
<p>Members & Non-Execs,</p>
<p>Practice Directors & Principals</p>
</td>
</tr>
</tbody>
</table>
You can use the CSS3 that allows to put style to the odd or even elements of a selector.
td:nth-child(odd) {
background: #ff0000;
}
td:nth-child(even) {
background: #0000ff;
}
I have a table in HTML that gets populated with data. However if some of the data is not filled in - which it isn't always, then the table will display, but with empty rows. I'm trying to get these rows that are empty to be hidden. I've tried a few things and nothing has seemed to work as of yet, does anybody have any ideas?
Here is my HTML code for the table:
<table style= width: 1300px;" border="1" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td colspan="1" rowspan="2" style="width: 75px; text-align: center;"><span style="font-size: 16px;">Sample Number</span></td>
<td colspan="1" rowspan="2" style="width: 50px; text-align: center;"><span style="font-size: 16px;">Sample Type</span></td>
<td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Pump No</span></td>
<td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Cowl No</span></td>
<td colspan="1" rowspan="2" style="width: 200px; text-align: center;"><span style="font-size: 16px;">Sample Location</span></td>
<td colspan="2" rowspan="1" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Sampling Times</span></td>
<td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Duration (mins)</span></td>
<td colspan="2" rowspan="1" style="text-align: center;"><span style="font-size: 16px;">Flow
Rates (l/min)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Mean<br>
Flow Rate (l/min)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Sample Volume (litres)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Fibres Counted</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Graticule Fields</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Limit of Detection (f/ml)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Calculated Result (f/ml)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Recorded Result (f/ml)</span></td>
</tr>
<tr>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Start</span></td>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Finish</span></td>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Start</span></td>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Finish</span></td>
</tr>
<tr>
<td><span style="font-size: 16px;"><%SampleNumber_1%></span></td>
<td><span style="font-size: 16px;"><%TypeofTest_1%></span></td>
<td><span style="font-size: 16px;"><%PumpNo_1%></span></td>
<td><span style="font-size: 16px;"><%CowlNo_1%></span></td>
<td><span style="font-size: 16px;"><%SampleLocation_1%></span></td>
<td><span style="font-size: 16px;"><%SampleStart_1%></span></td>
<td><span style="font-size: 16px;"><%SampleFinish_1%></span></td>
<td><span style="font-size: 16px;"><%SampleDuration_1%></span></td>
<td><span style="font-size: 16px;"><%FlowRateStart_1%></span></td>
<td><span style="font-size: 16px;"><%FlowRateFinish_1%></span></td>
<td><span style="font-size: 16px;"><%FlowRatelminMean_1%></span></td>
<td><span style="font-size: 16px;"><%SampleVolumelitres_1%></span></td>
<td><span style="font-size: 16px;"><%FibresCount_1%></span></td>
<td><span style="font-size: 16px;"><%GraticuleFields_1%></span></td>
<td><span style="font-size: 16px;"><%Limit_1%></span></td>
<td><span style="font-size: 16px;"><%CalculatedResult_m1%></span></td>
<td><span style="font-size: 16px;"><%ReportedResult_1%></span></td>
</tr>
<tr>
<td><span style="font-size: 16px;"><%SampleNumber_2%></span></td>
<td><span style="font-size: 16px;"><%TypeofTest_2%></span></td>
<td><span style="font-size: 16px;"><%PumpNo_2%></span></td>
<td><span style="font-size: 16px;"><%CowlNo_2%></span></td>
<td><span style="font-size: 16px;"><%SampleLocation_2%></span></td>
<td><span style="font-size: 16px;"><%SampleStart_2%></span></td>
<td><span style="font-size: 16px;"><%SampleFinish_2%></span></td>
<td><span style="font-size: 16px;"><%SampleDuration_2%></span></td>
<td><span style="font-size: 16px;"><%FlowRateStart_2%></span></td>
<td><span style="font-size: 16px;"><%FlowRateFinish_2%></span></td>
<td><span style="font-size: 16px;"><%FlowRatelminMean_2%></span></td>
<td><span style="font-size: 16px;"><%SampleVolumelitres_2%></span></td>
<td><span style="font-size: 16px;"><%FibresCount_2%></span></td>
<td><span style="font-size: 16px;"><%GraticuleFields_2%></span></td>
<td><span style="font-size: 16px;"><%Limit_2%></span></td>
<td><span style="font-size: 16px;"><%CalculatedResult_m2%></span></td>
<td><span style="font-size: 16px;"><%ReportedResult_2%></span></td>
</tr>
For example, imagine only the first row was filled in and the second therefore not need be displayed.
Edit
The table gets populated using a mobile application, which you insert data into. The HTML is then a template so that it can be printed. To get this information from the app, you must put in the <% ... %> tags, the stuff inside the tag is the ID of a text-box within the app, for example. If you load this into a web browser it will only display the tags, if this is loaded in the mobile app, it will display information in the table. However if these text-boxes or drop-downs (whatever they may be) haven't been filled in then the table will still load, but with no data in it. I therefore need the blank rows with no data in, to be hidden.
Here is a link to my table and how it displays
http://screenpresso.com/=5xMwd The first image is how it displays within a browser and will always show the tag. However the second image is within the app and will show the data that the text boxes have in them, as mentioned above. As you can see if the text-boxes are blank there is blank rows.
Thanks in advance.
Here is a working DEMO
CSS:
table, table td {border: 1px solid #f00; height: 20px;}
jQuery
$('#start').click(function() {
var rows = $('table').find('tr');
$.each(rows, function(idx, trobj) {
var hasvalue = false;
var spans = $(this).find('td span');
$.each(spans, function(spanidx, spanobj) {
//console.log($(obj).html() );
if ($(spanobj).html() != '') {
hasvalue = true;
}
});
if (!hasvalue) {
$(this).hide();
}
});
});
Test HTML
<table style= "width: 1300px; border-collapse: collapse;" border="1" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td colspan="1" rowspan="2" style="width: 75px; text-align: center;"><span style="font-size: 16px;">Sample Number</span></td>
<td colspan="1" rowspan="2" style="width: 50px; text-align: center;"><span style="font-size: 16px;">Sample Type</span></td>
<td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Pump No</span></td>
<td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Cowl No</span></td>
<td colspan="1" rowspan="2" style="width: 200px; text-align: center;"><span style="font-size: 16px;">Sample Location</span></td>
<td colspan="2" rowspan="1" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Sampling Times</span></td>
<td colspan="1" rowspan="2" style="width: 60px; text-align: center;"><span style="font-size: 16px;">Duration (mins)</span></td>
<td colspan="2" rowspan="1" style="text-align: center;"><span style="font-size: 16px;">Flow
Rates (l/min)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Mean<br>
Flow Rate (l/min)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Sample Volume (litres)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Fibres Counted</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Graticule Fields</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Limit of Detection (f/ml)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Calculated Result (f/ml)</span></td>
<td colspan="1" rowspan="2" style="width: 70px; text-align: center;"><span style="font-size: 16px;">Recorded Result (f/ml)</span></td>
</tr>
<tr>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Start</span></td>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Finish</span></td>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Start</span></td>
<td style="width: 40px; text-align: center;"><span style="font-size: 16px;">Finish</span></td>
</tr>
<tr>
<td><span style="font-size: 16px;"><%SampleNumber_1%></span></td>
<td><span style="font-size: 16px;"><%TypeofTest_1%></span></td>
<td><span style="font-size: 16px;"><%PumpNo_1%></span></td>
<td><span style="font-size: 16px;"><%CowlNo_1%></span></td>
<td><span style="font-size: 16px;"><%SampleLocation_1%></span></td>
<td><span style="font-size: 16px;"><%SampleStart_1%></span></td>
<td><span style="font-size: 16px;"><%SampleFinish_1%></span></td>
<td><span style="font-size: 16px;"><%SampleDuration_1%></span></td>
<td><span style="font-size: 16px;"><%FlowRateStart_1%></span></td>
<td><span style="font-size: 16px;"><%FlowRateFinish_1%></span></td>
<td><span style="font-size: 16px;"><%FlowRatelminMean_1%></span></td>
<td><span style="font-size: 16px;"><%SampleVolumelitres_1%></span></td>
<td><span style="font-size: 16px;"><%FibresCount_1%></span></td>
<td><span style="font-size: 16px;"><%GraticuleFields_1%></span></td>
<td><span style="font-size: 16px;"><%Limit_1%></span></td>
<td><span style="font-size: 16px;"><%CalculatedResult_m1%></span></td>
<td><span style="font-size: 16px;"><%ReportedResult_1%></span></td>
</tr>
<tr>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
<td><span style="font-size: 16px;"></span></td>
</tr>
</table>
<button id="start">START</button>
EDIT:
Ok, so based on OP edit, this is another jsfiddle: http://jsfiddle.net/b7pexhh6/8/