I am trying to parse below HTML text to get data from tag
<table class=\"table table-condensed\">
<tr>
<td colspan =\"2\">
<h4>New Company</h4>
</td>
</tr>
<tr>
<td>application</td>
<td>web</td>
</tr>
<tr>
<td>server_name</td>
<td>news.com</td>
</tr>
<tr>
<td colspan =\"2\">
<h4>Internal Machine</h4>
</td>
</tr>
<tr>
<td>IP</td>
<td>1.1.1.1</td>
</tr>
<tr>
<td>MAC</td>
<td>AC:87:87:87:87:87</td>
</tr>
<tr>
<td colspan =\"2\">
<h4>External Machine</h4>
</td>
</tr>
<tr>
<td>IP</td>
<td>217.16.26.161</td>
</tr>
<tr>
<td> Location</td>
<td>test</td>
</tr>
<tr>
<td colspan =\"2\">
<h4>Additional Information</h4>
</td>
</tr>
<tr>
<td>Amount Sent</td>
<td>00.0 B</td>
</tr>
<tr>
<td>Amount Received</td>
<td>2.5 KB</td>
</tr>
<tr>
<td>Application</td>
<td>web</td>
</tr>
<tr>
<td>Ports</td>
<td>12345, 123</td>
</tr>
</table>
You can use the following libraries to help you parse HTML in Swift:
Kanna
Fuzi
NDHpple
For example, this can extract all TD values in your HTML using Kanna (code not tested):
let html = "<html>...</html>"
if let doc = Kanna.HTML(html: html, encoding: NSUTF8StringEncoding) {
for td in doc.css("td") {
print(td)
}
}
Related
Example
This is a "T-account" as shown in the book Principles of Macroeconomics by Gregory Mankiw:
Code
To render this, I took the approach of using nested tables:
<table class="table">
<thead>
<tr>
<th>ASSETS</th>
<th>LIABILITIES AND OWNERS' EQUITY</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>Reserves</td>
<td style="text-align: right;">200</td>
</tr>
<tr>
<td>Loans</td>
<td style="text-align: right;">700</td>
</tr>
<tr>
<td>Securities</td>
<td style="text-align: right;">100</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Deposits</td>
<td style="text-align: right;">800</td>
</tr>
<tr>
<td>Debt</td>
<td style="text-align: right;">150</td>
</tr>
<tr>
<td>Capital</td>
<td style="text-align: right;">50</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
In my application (with some CSS that comes with Blazor) here's the result:
Question
This seems to work OK, although it seems a bit odd. There's the assumption that the rows in each table will always align, for example.
Is there a better or more idiomatic way to implement the T-account in HTML?
There is a table:
<table style="width:920px;" id="tblPotrawySkladniki">
<thead>
<tr>
<td class="cell0 style1"><p style="font-style:italic;">Nazwa produktu</p></td>
<td class="cell1 style1"><p style="font-style:italic;">Waga [g]</p></td>
</tr>
</thead>
<tbody>
<tr>
<td>banana</td>
<td>10</td>
</tr>
<tr>
<td>orange</td>
<td>20</td>
</tr>
<tr>
<td>raspberry</td>
<td>35</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="cell0 style1"><p style="font-weight:bold;">TOTAL</p></td>
<td class="cell1 style1"><p style="font-weight:bold;"></p></td>
</tr>
</tfoot>
</table>
How can I sum up all cells in tbody second column and put the result in tfoot cell also second column?
The table is dynamic. I would like to use jquery.
This would be one way of doing it:
let sum=$("#tblPotrawySkladniki tbody td:nth-child(2)").get().reduce((a,c)=>
+$(c).text().replace(",",".")+a,0);
$("#tblPotrawySkladniki tfoot td:nth-child(2)").text(sum);
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table id="tblPotrawySkladniki">
<thead>
<tr>
<td class="cell0 style1"><p style="font-style:italic;">Nazwa produktu</p></td>
<td class="cell1 style1"><p style="font-style:italic;">Waga [g]</p></td>
</tr>
</thead>
<tbody>
<tr>
<td>banana</td>
<td>10</td>
</tr>
<tr>
<td>orange</td>
<td>20,3</td>
</tr>
<tr>
<td>raspberry</td>
<td>35,5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="cell0 style1"><p style="font-weight:bold;">TOTAL</p></td>
<td class="cell1 style1"><p style="font-weight:bold;"></p></td>
</tr>
</tfoot>
</table>
Instead of parseInt() my script makes use of implicit type conversion with the unary + operator before $(c).text().
You can use jQuery .each() to cycle through the second td of each row, access the contents of the element using $(this).text(), then add them up as you go.
You should parse the value first so that they will add up as numbers and not concatenate.
let values = 0;
jQuery('table tbody tr td:nth-of-type(2)').each(function(){
let value = parseInt($(this).text(),10);
values += value;
});
console.log(values);
<table style="width:920px;" id="tblPotrawySkladniki">
<thead>
<tr>
<td class="cell0 style1">
<p style="font-style:italic;">Nazwa produktu</p>
</td>
<td class="cell1 style1">
<p style="font-style:italic;">Waga [g]</p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>banana</td>
<td> 10</td>
</tr>
<tr>
<td>orange</td>
<td> <span class='price'>20</span></td>
</tr>
<tr>
<td>raspberry</td>
<td> <span class='price'>35</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2" style="text-align:center"><span id="sum"></span></th>
</tr>
</tfoot>
$(document).ready(function() {
$('.price').each(function(i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function() {
var value = parseInt($('.price', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('#sum').eq(index).text('Total: ' + total);
}
I have this table where I show in the td of white color is the consolidated information of the td of gray color.
Like this:
The yellow color fields "- Und" It should show the sum of the fields below.
The correct result would look something like this:
I have identified the tds by an id, but I can't get it to add up.
tdgray = gray
tdwhite = white
var total = 0;
$(".tdgray").each(function() {
total += parseInt($(this).text()) || 0;
});
$(".tdwhite").text(total);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<TABLE BORDER>
<TR>
<TD>price</TD>
</TR>
<TR>
<TD id="tdwhite" class="tdwhite"></TD>
</TR>
<TR>
<TD class="tdgray">421</TD>
</TR>
<TR>
<TD class="tdgray">124</TD>
</TR>
<TR>
<TD class="tdgray">982</TD>
</TR>
<TR>
<TD id="tdwhite" class="tdwhite">Und</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
</TABLE>
If you see the result works but adds all the gray tds and does not go from record to record, I have a table with more than 300 white tds, can be a problem some solution?
LOOK THE EXAMPLE HERE
Your explanation of what you are needing is quite confusing.
I believe this is what you are looking for. It uses nextUntil() to loop through the rows that have a tdgray after each tdwhite and sums that group
$(".tdwhite").text(function() {
var total = 0;
$(this).parent().nextUntil(':has(.tdwhite)').each(function() {
total += parseInt($(this).find('.tdgray').text()) || 0;
});
return total
});
.tdwhite{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<TABLE BORDER>
<TR>
<TD>price</TD>
</TR>
<TR>
<TD id="tdwhite" class="tdwhite"></TD>
</TR>
<TR>
<TD class="tdgray">421</TD>
</TR>
<TR>
<TD class="tdgray">124</TD>
</TR>
<TR>
<TD class="tdgray">982</TD>
</TR>
<TR>
<TD class="tdwhite">Und</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
</TABLE>
Here is another (Vanilla JavaScript) solution:
document.querySelectorAll(".tdwhite").forEach(el => {
let p, total = 0;
for (p = el.parentNode.nextElementSibling;
(p && !p.querySelector('.tdwhite')); p = p.nextElementSibling)
total += +p.querySelector('.tdgray').textContent || 0;
el.textContent = total
});
.tdwhite {
color: red
}
<TABLE BORDER>
<TR>
<TD>price</TD>
</TR>
<TR>
<TD id="tdwhite" class="tdwhite">one</TD>
</TR>
<TR>
<TD class="tdgray">421</TD>
</TR>
<TR>
<TD class="tdgray">124</TD>
</TR>
<TR>
<TD class="tdgray">982</TD>
</TR>
<TR>
<TD class="tdwhite">Und</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
<TR>
<TD class="tdgray">200</TD>
</TR>
</TABLE>
So lets say, in a HTML snippet, I have some non-table tags, then a <table> tag, then some non-table tags, then another <table> tag and so on.
What I wanna do is get the first set of non-table tags into one group, then the table section in another and the next set of non-table tags into another and so on.
I have tried using regex. It is becoming superly complicated. I have tried searching how to do using BeautifulSoup but no use.
And also, if I have to extend it to ordered <ol> and unordered <ul> sections, how can I do it?
For example: I have this (HTML) string:
<h2>Hello There.</h2>\n
<p>
Click ME </p>
<p>Lets have a coffee</p>\n
<table>
<tbody>
<tr>
<th>Drink</th><th>Cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Coffee</td><td>152.61 </td> </tr>
<tr>
<td>Coke</td><td>62.56</td> </tr>
<tr>
<td>Pepsi</td><td>21.71</td> </tr>
</tbody>
</table>
<p>
So? click me too. Here is another list</p>
<table>
<tbody>
<tr>
<th>Food</th><th>cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Bhel</td><td>25.5</td> </tr>
<tr>
<td>Puri</td><td>23.0</td> </tr>
<tr>
<td>Something</td><td>19.4</td> </tr>
<tr>
<td>Pani</td><td>17.12 </td> </tr>
<tr>
<td>Puriya</td><td>10.64 </td> </tr>
<tr>
<td>Done</td><td>9.21</td> </tr>
<tr>
<td>Rice</td><td>9.20 </td> </tr>
</tbody>
</table>
<p>This amazing collection is here.</p>
Required Result:
[<h2>Hello There.</h2>
<p>
Click ME </p>
<p>Lets have a coffee</p>,
<table>
<tbody>
<tr>
<th>Drink</th><th>Cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Coffee</td><td>152.61 </td> </tr>
<tr>
<td>Coke</td><td>62.56</td> </tr>
<tr>
<td>Pepsi</td><td>21.71</td> </tr>
</tbody>
</table>,
<p>
So? click me too. Here is another list</p>,
<table>
<tbody>
<tr>
<th>Food</th><th>cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Bhel</td><td>25.5</td> </tr>
<tr>
<td>Puri</td><td>23.0</td> </tr>
<tr>
<td>Something</td><td>19.4</td> </tr>
<tr>
<td>Pani</td><td>17.12 </td> </tr>
<tr>
<td>Puriya</td><td>10.64 </td> </tr>
<tr>
<td>Done</td><td>9.21</td> </tr>
<tr>
<td>Rice</td><td>9.20 </td> </tr>
</tbody>
</table>,
<p>This amazing collection is here.</p>]
a list containing the parts
I am having problems with formatting a table. For some reason, the colspans and rowspans are not working and the cells are just dropped into the first row and column available. I have made column groups specifying the width of the columns. I have the code here:
<table class = “programs” border=“1”
summary=“Lists the morning programs aired by KPAF from 5:00 a.m. to 12:00p.m.(central time).>
<caption> All Times Central </caption>
<colgroup>
<col class = “timeColumn” />
<col class = “wDayColumns” span =“5”/>
<col class = “wEndColumns” span=“2”/>
</colgroup>
<thead>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</thead>
<tbody>
<tr>
<th>5:00</th>
<td colspan =“5” rowspan=“4”>Dawn Air</td>
<td colspan =“1”>Dawn Air Weekends</td>
<td colspan =“1”>Sunday Magazine</td>
</tr>
<tr>
<th>5:30</th>
</tr>
<tr>
<th>6:00</th>
<td col = “1” rowspan = “2”>Weekend Reflections</td>
</tr>
<tr>
<th>6:30</th>
</tr>
<tr>
<th>7:00</th>
<td colspan=“5”> Local News</td>
<td colspan=“1” rowspan=“2”>Weekend Wrap</td>
<td colspan=“1” rowspan=“2”>Radio U</td>
</tr>
<tr>
<th>7:30</th>
<td colspan=“5”>World News Feed</td>
</tr>
<tr>
<th>8:00</th>
<td colspan=“5” rowspan=“4”>Classical Roots</td>
<td colspan=“1” rowspan=“3”>What can you say?</td>
<td colspan=“1” rowspan=“4”>University on the air</td>
</tr>
<tr>
<th>8:30</th>
</tr>
<tr>
<th>9:00</th>
</tr>
<tr>
<th>9:30</th>
<td colspan=“1” rowspan=“4”>Animal Talk</td>
</tr>
<tr>
<th>10:00</th>
<td colspan=“5” rowspan=“4”>Symphony City</td>
<td colspan=“1” rowspan=“1”>Word Play</td>
</tr>
<tr>
<th>10:30</th>
<td colspan=“1” rowspan=“1”>Brain Stew</td>
</tr>
<tr>
<th>11:00</th>
<td colspan=“1” rowspan=“3”>Opera Live from the East Coast</td>
<td colspan=“1” rowspan=“1”>The Inner Mind</td>
</tr>
<tr>
<th>11:30</th>
<td colspan=“1” rowspan=“1”> Grammar Rules!!</td>
</tr>
<tr>
<th>12:00</th>
<td colspan=“5” rowspan=“1”>Book Club</td>
<td colspan=“1” rowspan=“1”>Weekend Wrap</td>
</tr>
</tbody>
</table>
it's because you are using bad quotes “,”. You have to use normal ones " (ASCII code: 034)