xpath condition select text of one node or another node - html

this is my test data
<tbody>
<tr>
<td>foo 1</td>
<td>first interest</td>
<td>bar 1</td>
</tr>
<tr>
<td>foo 2</td>
<td>
<p>second interest</p>
</td>
<td>bar 2</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
I'd like to select every time text of second cell (td[2]) of table row but problem is that the text can be in another subelement (paragraph p).
When I execute this xpath //tbody/tr[1]/td[2]/p/text() | //tbody/tr[1]/td[2]/text() the result is ok, but if I execute this for second row //tbody/tr[2]/td[2]/p/text() | //tbody/tr[2]/td[2]/text() then I get three texts where first and last are empty. How can I modify the xpath to get everytime only the text which I'm interested in. Note: there can be also empty cell, that I don't want to get.
thanks

Try this XPath to get text from required (not empty second) table cells:
//tbody/tr/td[2]//text()[normalize-space()]

Related

HTML tables - How to use rowspan properly?

I want to create a table like:
T1----T2----T3
--------------
B1
A1 B2 C1
B3
I'm using the following code:
<table class="table">
<thead>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">A1</td>
<tr>
<td>B1</td>
<tr>
<td>B2</td>
</tr>
<td>C1</td>
</tr>
</tbody>
</table>
Demo: https://jsfiddle.net/90yegr6f/
I have problems with C1. How to solve this?
You need to focus on doing things one row at a time. Deal with everything in the first row. Then start a new row and deal with everything in that.
So the first row contains A1, B1 and C1.
<tr>
<td>A1
<td>B1
<td>C1
The second row contains only B2
<tr>
<td>B2
and so on.
Now, you want the first and last cells of the first row to span multiple rows:
<tr>
<td rowspan=3>A1
<td>B1
<td rowspan=3>C1
Which gives you:
<table class=table>
<thead>
<tr>
<th>T1
<th>T2
<th>T3
<tbody>
<tr>
<td rowspan=3>A1
<td>B1
<td rowspan=3>C1
<tr>
<td>B2
<tr>
<td>B3
</table>

XPath - Duplicating results based on tag counts

I have a table that I would like to enter into a spreadsheet/database by duplicating the title based on the number of rows within a sub-table.
I would like to avoid post-processing if possible, so I'm looking for an XPath expression that does this.
For example:
<table>
<tr>
<th>Title One</th>
</tr>
<tr>
<td>
<table>
<tr>
<td>Row one</td>
</tr>
<tr>
<td>Row Two</td>
</tr>
<tr>
<td>Row Three</td>
</tr>
<tr>
<td>Row Four</td>
</tr>
</table>
</td>
</tr>
</table>
From above, is there an XPath expression that would return 'Title One' 4 times, based on the number of tr//td tags in the subtable? For example:
Title One
Title One
Title One
Title One
XPath 2.0 or 3.0 can do that in a single expression:
for $r in 1 to count(/table/tr[2]/td/table/tr/td) return /table/tr[1]/th/string()
It can be done easily programmaticaly; here I use bash, but the logic can be used in any language of your choice :
count=$(xmllint --xpath 'count(//td[starts-with(text(), "Row")])' table.html)
for ((i=0; i<count; i++)) {
xmllint --xpath '//table/tr/th/text()' table.html
echo
}
OUTPUT :
Title One
Title One
Title One
Title One

How can I get particular field value?

I have one table, in this table two columns and 5 rows are there. In First column have a check box and second column have a data. I want get the second column row value of checked items.
My table id was "tb1", checkbox id "cb1" and second field id "da1".
I want the result like "Data2 and Data5" That means whatever I check, that particular second column(<td>) value.
This is possible, please help me.
If you are using cb2 and da2 for row two, then in javascript you could do:
If data column is td element only:
document.getElementById("da2").innerText
If data column is input element:
document.getElementById("da2").value;
JS Bin
Bind the event on every checkbox and the find second field" with the help of closest
JavaScript
$(function(){
$("#tb1").on('click','input',function(){
var value =($(this).closest('tr').find('[id^=da]').text())
alert(value)
})
})
HTML
<table id="tb1" cellpadding="5" border="1" cellspacing='0' width="200">
<tr>
<td id="cb1"><input type='checkbox' /> </td>
<td id="da1">Data 1</td>
</tr>
<tr>
<td id="cb2"><input type='checkbox' /> </td>
<td id="da2">Data 2</td>
</tr>
<tr>
<td id="cb3"><input type='checkbox' /> </td>
<td id="da3">Data 3</td>
</tr>
<tr>
<td id="cb4"><input type='checkbox' /> </td>
<td id="da4">Data 4</td>
</tr>
</table>

A table row was 2 columns wide and exceeded the column count established by the first row (1)

I want to validate my page but w3c keeps giving me this warning. I want to get rid of it but I can't seem to find the cause of it.
It gives me this error:
A table row was 2 columns wide and exceeded the column count established by the first row (1).
Table and CSS code:
<table>
<tr>
<td>Contact informatie</td>
<tr>
<td>Adres:</td>
<td>Jan van der Heydenstraat 61</td>
<tr>
<td>Postcode:</td>
<td>1223 BG</td>
<tr>
<td>Plaats:</td>
<td>Hilversum</td>
<tr>
<td>Email:</td>
<td>info#blabla.nl</td>
<tr>
<td>Telefoon:</td>
<td>06-31903706</td>
</tr>
</table>
table {
border:none;
padding-left:75px;}
td:first-child {
width:135px;
border:none;
text-align:left;}
td+td {
border:none;
text-align: left;}
Anyone any suggestions?
It means exactly what it says. One of the rows in your table has too many columns. Specifically, the first row has less columns that a subsequent row. But we can't do much unless you post some code.
Edit
The markup for the table is incorrect.
You only have one cell in the first row (or do what PeeHaa suggested)
You need to close off each row with </tr>
Just change this:
<tr>
<td>Contact informatie</td>
</tr>
To this:
<tr>
<td colspan="2">Contact informatie</td>
</tr>
YOu should always close you tablerows (tr): </tr>.
Final version:
<table>
<tr>
<td colspan="2">Contact informatie</td>
</tr>
<tr>
<td>Adres:</td>
<td>Jan van der Heydenstraat 61</td>
</tr>
<tr>
<td>Postcode:</td>
<td>1223 BG</td>
</tr>
<tr>
<td>Plaats:</td>
<td>Hilversum</td>
</tr>
<tr>
<td>Email:</td>
<td>info#vazcreations.nl</td>
</tr>
<tr>
<td>Telefoon:</td>
<td>06-31903706</td>
</tr>
</table>
In extension to what SimpleCoder said, if you have the first row of a table have only one column, then the futher ones can have no more then one column. If you want to get around this you need to put a table inside the cell i.e.
<td>
<table>
<tr>
<td><!-- Content here --></td>
</tr>
</table>
</td>

Table cell too wide

Please, either look at http://jsfiddle.net/mawg/pL9kd/ or stick the code below into your favourite HTML editor ...
Look to the right of OMG! Item 4 contains a *nested* array. (How) can I get that nested array (xyz) to be 2 columns wide, even if its content doesn't need so much space?
<table border="1" cellpsacing="0" cellpadding="0" style="">
<tr><th style="border-width:1" colspan="3">This is an array</th></tr>
<td colspan="2">
<table border="1">
<tr><td colspan="3">Array</td></tr>
<tr>
<td>item 1</td>
<td>string ( 3 chars)</td>
<td>abc</td>
</tr>
<tr>
<td>0</td>
<td>string ( 25 chars)</td>
<td>item 2 is indexed by zer0</td>
</tr>
<tr>
<td>this equals seven</td>
<td>integer</td>
<td>7</td>
</tr>
<tr>
<td>item 4 is a nested array</td>
<td colspan="2">
<table border="1">
<tr><td colspan="3">Array</td></tr>
<tr>
<td>0</td>
<td>string ( 24 chars)</td>
<td>item 4, offest 0's value</td>
</tr>
<tr>
<td>OMG! Item 4 contains a *nested* array F5</td>
<td colspan="2">
<table border="1">
<tr><td colspan="3">Array</td></tr>
<tr>
<td>xyz</td>
<td>string ( 7 chars)</td>
<td>xyz val</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>item 4, offest 2 is True</td>
<td>boolean</td>
<td>True</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>final item</td>
<td colspan="2">NULL</td>
</tr>
</table>
</td>
</table>
Do you mean like this? http://jsfiddle.net/pL9kd/8/
(Width = 100%)
Check this you can use the width, to set to width='66%' which works since you know there are 3 columns and 2/3 is 66%. Also set the containing table to width='100%' since you are going to need all of the possible space.
From what I could find there is nothing like what your asking (or at least my interpretation of it). Could you not simply create a column width equaling two total columns?
So something like
<td width="40">xyz</td>
I could be way off but that's just my guess. Just curious, what is the implementation for this? I am sure you know css lists and other css elements are much more efficient at styling, correct?