Find cells under a column in an HTML table with xpath? - html

I want to be able to extract all cells under a certain column with xpath.
There are/may be occasionally colspans.
Is there any way to do this, by which I suppose I'm asking, is there any inherent relationship between a table header and the cells below it? Or is there no inherent relationship and despite being fairly easy to do visually, its outside the ability of pure xpath?
Scenario:
We have an HTML table with a dozen columns and several rows. The columns have headers, and some of the column headers span more than one column.
One of those column headers (we don't know which one) has the textual content "Pick Me".
I want to be able to select all the cells under that cell in the table.

You can do it in XPath 1. I assume that only one column has the desired header and the rowspan attribute does not occur.
tbody/tr/td[
count(preceding-sibling::td[not(#colspan)])
+ sum(preceding-sibling::td/#colspan)
= count(../../tr[1]/th[.='Pick Me']/preceding-sibling::th[not(#colspan)])
+ sum(../../tr[1]/th[.='Pick Me']/preceding-sibling::th/#colspan)]
The above expression yields all cells starting in the leftmost column of the Pick Me header. By duplicating a lot of the logic, you can get the cells starting in any column spanned by Pick Me or the cells sharing a column with Pick Me, perhaps the broadest interpretation of your question:
tbody/tr/td[
count(preceding-sibling::td[not(#colspan)])
+ sum(preceding-sibling::td/#colspan)
< count(../../tr[1]/th[.='Pick Me']/preceding-sibling::th[not(#colspan)])
+ sum(../../tr[1]/th[.='Pick Me']/preceding-sibling::th/#colspan)
+ count(../../tr[1]/th[.='Pick Me'][not(#colspan)])
+ sum(../../tr[1]/th[.='Pick Me']/#colspan)
and count(preceding-sibling::td[not(#colspan)])
+ sum(preceding-sibling::td/#colspan)
+ not(#colspan)
+ sum(#colspan)
> count(../../tr[1]/th[.='Pick Me']/preceding-sibling::th[not(#colspan)])
+ sum(../../tr[1]/th[.='Pick Me']/preceding-sibling::th/#colspan)]
The strategy here is to compute the "position" of both the left and right side of each cell and the Pick Me header, where "position" means the number of columns to something's left. The cell overlaps the header's column(s) if, and only if, the cell's left is left of the header's right and the cell's right is right of the header's left. That is the meaning of the numeric comparisons.

No, there is no association in xpath between column headers in a table and the column they fall within.
The only way to find cells that fall beneath a specific column header is, using some other code, to count the columns (account for colspans) until the desired table header is found, and then count that many columns in each row to extract the cells.

In case you need to grab specific column for example the first:
//tr/td[1]

Related

SSRS - hide a column and change width of other column

I'm creating a report that has 5 columns. However, one column can have no data and in that case I need to hide it. This works using the 'Hidden' property of column but when the column is hidden, I want to make the first column wider. Is there any way to do this in expression?
The only solution I found is to have multiple same tablixes with different column count and then show or hide each tablix appropriately if the specific column has no data. (by checking 'Max' value in column).
Unfortunately, it's not possible to enter an expression to the column width property but if you simply need to change the width of one other column when the first is hidden, I've come up with a workaround that works fairly well.
The idea is a little easier and requires less data to load than your current solution. Basically, you'll create an identical width column that is simply empty -- but set the borders to appear as if it is simply part of another column. So you'll simple reverse the expression used to hide the column with no data in the hidden property. To achieve this, depending on where you choose to add the extra space column, you'll have to adjust the borders of the adjoining cells where there is no right border on the cell to the left and a left border on the cell to the right. Depending on your layout, you would only need a top and bottom border on the extra space column cells.
I did something similar with a report that has 3 pages and 11 columns -- but 8 of the columns changed from page to page. I had to hide one column, show another, and used expressions in column headers and detail rows to simply change the data in each column based on a field that returns the type of the data.

Create a Header Row in SSRS

I am trying to create a header row for a matrix in my SSRS report. Currently my matrix is configured as the following:
If I right+click to add a new row, it will insert a row above but I cannot merge the entire row of cells to form a single row, the grouping columns stay separate:
My work-around has been to add a text box above the matrix, but will not keep the the rows together in a page break:
Is it possible to add the header row? And if so, what would be a good way to accomplish this task?
I had the same issue! I wish they would let you merge across the row header; or add a new region of matrix called "title" .
My tablix also had dynamic columns, so I needed the width of the box on the top to expand and collapse with the rest of the table.
There are two ways you can handle it (that I know of)
1. Create a "parent" list object with two rows and insert the table in the second row
2. Put all the columns to the right of the row header
To solve my problem I tried both. First, I added the list with one column and two rows and I copied the entire table into the second row. The first row of the outer list is now centered and spans the entire table. It was messy because I had dynamic columns with a toggle for visibility. The outer list had to have columns that lined up with the visibility set to the same toggle. It was a messy work around because of that.
I decided to try the second method above and insert new columns on the other side of the row header.
The challenge is that row header group labels will repeat for each row... in your example RoleID would repeat down each detail row. I created an expression to only show when it was the first row of the group.
=iif(RowNumber("roleid_group") = 1,
max(Fields!roleID.Value,"roleid_group"),
"")
I used an expression to only show the border when it was the last row in the group:
=iif(RowNumber("roleid_group") = countrows("roleid_group"),"Solid","None")
This gives the illusion of a grouped row. Don't delete the row header columns (column 1 and 2) until you get it working because its hard to add them back.
Careful: This method though doesn't work well if the text of the row title needs to wrap. (The first row of the group will be wider --row height is set to can grow.)
If there is another way I would love to know. These are both somewhat tricky but get the job done.

Marking up a comparison table with an empty top-left cell

I have a comparison table that is comparing two things on several properties. The way I have the table designed right now, the first column lists the properties the thing is being compared on, and the second and third columns list the values of the properties of the two things being compared. However, this leaves an empty cell in the top-left corner of the table. I'm wondering, what is the proper way to code this empty cell? I've read that it's bad practice to insert empty cells in tables.

is it possible to make CSS3 tables that have different number column and column width in each row?

is it possible to use CSS3 table to make it look like this
+---A---+---B---+---C---+---D---+---E---+
>>>>+---A---+---B---+---C---+---D---+<<<< ---> case 1
+---A---+---B---+---C---+---D---+---E---+
case 1: need to margin-left the first cell right? is it any code that make auto to margin
+---A---+---B---+---C---+---D---+---E---+
+-----A-----+-------B-------+---C---+-D-+ ---> case 2
case 2: colspan is work on the cell width is same. what if the cell width is vary. Is it possible?
all of this code must be in CSS3 and HTML5 only. No use <table>, <tr>, <td> only <div>
Should I convert to use grid instead of using table?
Thank you.
Use tables if it is tabular data, if it isn't then use something else.
From your example where column widths don't match, and where colspans don't do what you want it's hard to see how the data could be tabular data.
A couple of options, colspan can work if you do it the right way. For example setting a colspan of 2 on normal single span cells would allow you to make other cells span to halfway through another column.
Or if it really isn't tabular data then use DIV's and position them apropriatley.
Using tables, you would not be able to vary the width of one rows cells without affecting the width of all the other rows cells though, im not even sure you can dynamically change colspan once the table has been drawn, never tried it to be honest).
In all honesty I suspect you are really looking to solve this using DIV's, as your data really doesn't seem to fit the tabular data model. Tbular data will generally have headers on columns with data corresponding to those column headers in the appropriate column. Your cells seem to be able to move freely and therefore would not be fixed under any particular column header.
I am guessing from the layout that you are possibly creating some sort of calendar? and events can span any distance of time etc across the columns? In which case I personally would prefer divs, although I know some people would prefer using tables.

How to create a table that I can add or remove columns from

I need to produce a table similar to:
What we see is the left column containing the data point headers, and each column after contains the actual data.
I'd like to treat each column (other than the first one) as an optional column. The user can add or remove the columns based on funds they select. If they've selected only 1 fund, only the first 2 columns are visible, the rest of the spaces are blank. Each subsequent fund selection adds a new column to the table, up to a max of 5.
I'm wondering what is the best way to implement this? I'm thinking each column is an independent table of a fixed width that I can add to a container which can align them side by side. Will I have difficulty getting the 6 tables to line up side by side?
Is there a better way for me to achieve this result?
You could have invididual tables, or you could assign each column a class which would then allow you to add or remove all elements that have that class using Javascript.
For example:
<table>
<tr><td class="col1"></td><td class="col2"></td><td class="col3"></tr>
<tr><td class="col1"></td><td class="col2"></td><td class="col3"></tr>
</table>
You could then use Javascript to show/hide elements (via CSS) with the relevant class based on actions of the user. Depending on how big your table is, that could work.
Nice use of Comic Sans by the way!