I have been at this for a while and am throwing in the towel for help. I am trying to scrap this page specifically I am trying to get access to every table row that has information in it as highlighted green in the following picture. I do no need the table headers, just the rows.
With Scrapy I am able to get to each section area (where it says "Main Campus") with the following selector
response.css('.datadisplaytable .datadisplaytable')
I use .datadisplaytable twice because the tables I am trying to select are inside a table with that class. After that what seems logical to me to get to the table row I am after would be to use the following selector
response.css('.datadisplaytable .datadisplaytable tbody:nth-child(2)')
However, I get nothing with this selector. What am I doing wrong?
Your selector is a bit off. You're not trying to get the 2nd <tbody/> tag.
.datadisplaytable .datadisplaytable tbody tr:nth-child(n+2)
That will get you all the rows, and skip the header for each table.
Related
I'm displaying a table that consists of all of the events a specific team as attended in a given year. Each row of the table gives some general stats for a single event (seed, placement, etc). When I click on any given row, I want to expand a nested table that shows all the games from that specific event.
I'm having some issues with the formatting. Right now when I expand the new table, it reformats the parent table in a strange way and all of the nested table columns only stretch across the first of the parent table. How can I make it the same width of the parent table?
Here is an example
and here is a screenshot of the more pretty formatted table in case the stackblitz example is hard to see.
Collapsed:
Expanded:
You need to place your nested table in a tr and td with a colspan="4"
See the updated example: https://stackblitz.com/edit/angular-ivy-wnr2qn-nested-table
Full code. Just change ng-container for a tr.
Full code:
https://stackblitz.com/edit/angular-ivy-kutwtd
Example live: Here
IMAGES EXAMPLE
I'm trying to create Table Rows in a Table that can expand by clicking on them (individually).
For example, if I would click on the specified area in the picture below, a Segment/Container (some sort of area) would drop down with content inside.
I've tried a solution that is mentioned in this thread, but the underlying problem is that every element under a Table Row/Cell is subject to the rules and boundaries of the Table HeaderCell. So if I for example try to create a Table Row with a Segment under it, the result will look like this:
As you can see the Segment is inside the new Row but is limited to the size of the HeaderCell.
When doing this I also get this error:
validateDOMNesting(...): <div> cannot appear as a child of <tr>.
in div (created by Segment)
It seems that Segment under Table Row is therefore a prohibited element structure.
Any idea on how the element structure should look to create some kind of area under a Table Row?
The the warning of a <div> not being allowed as a child of a table row is telling you that it is not valid HTML. That is true whether you are using Semantic UI React or plain HTML.
I'd recommend rendering another row below the row you have in your table already. Set a column inside of that row which spans all of the columns. Now you have a container which you can put other UI inside if you want to. You can customize the style of the wide cell if you need to for some reason.
Then you can set a toggle state on the clickable area of your table. You'll probably want to put the click events on the contents of the cells and not the cells themselves.
I threw together a quick Codepen showing how this would work. This gives you a working concept that you can modify based on your use case.
https://codesandbox.io/s/serene-water-ikco9?file=/example.js
If I write the XPath for a row in a table which is expandable, like each row is expandable on the table. it has a dropdown. if I click on the dropdown of the row, I get to see some stuff inside it.
if I want to write XPath for the body inside the dropdown. ex: for the second row, I get it by writing the XPath:
//div[#class=‘react-bs-container-body’]//tbody/tr[2]
If i write the following xpath :
//div[#class=‘react-bs-container-body’]//tbody/tr[td[#tabindex="7"]]
where I am trying to access the same thing by giving the attribute of the column which is unique. Xpath should give me the body inside the dropdown.
but this is not happening. The second case won't work. Can anyone tell me why?
You can try this xpath with single quotations,
//div[#class=‘react-bs-container-body’]//tbody/tr[td[#tabindex='7']]
Also, you can try with the below xpath as well
//div[#class=‘react-bs-container-body’]//tbody/tr[td[7]]
I am trying to create a Table that shall contain some columns with basic facts on the left and on the right side there shall be some columns that can be tabbed. Something like this:
So the Question is, how to do this?
I could personaly think of two solutions, but I actually don't like both:
Write a own Table for Tab1,Tab2 ... That contains the basic data and the Tabbed Data
Write a Table for the basic Data and one for each Tab. Here I think you would have a lot of Design problem "glueing" both tables together, so they look like one table.
So actually I don't like both solutions. Maybe there is a better solution to this?
Perhaps you could give the columns that belong to each tab their own unique class, e.g. .tab1-columns, .tab2-columns, etc. Then, you could show or hide the column depending on the active tab. The tabs, however, would exist outside of the table. Alternatively, you could pt the tabs into a pseudo- header row above the actual table header row, with the first header cell spanning those cells that shouldn't be "tabbed". However, I believe leaving the tabs outside of the table would be a bit more semantic in nature.
HTH.
Render all columns but hide them (display: none;) except the column by default.
Then add an click event on the tabs to switch the visible columns. be sure to use just the nav-tabs and not the js component.. it will be easier I think
I've got a bit of a challenge with an HTML table that we need to have raised columns. If you look at the attached image you'll see what I mean.
The purpose of these raised columns is to draw the user's attention to them.
The problem is:
To get the effect of the column raising above the other columns you
need some kind of element/height/margin to appear outside the
boundary of the table, which doesn't seem to work
Same goes for the bottom
To have the drop shadow appear correctly, it needs to be applied to all the cells in a column.
We did get this to work by splitting it up into multiple tables then applying the styles to the table that should be the raised column. The image I've attached is actually a live table working like this.
But, you loose all other needed features of tables...
Row heights don't match if the text wraps in table 1 but not in
table 2.
To deal with the row height issue we applied a fixed height to each table's rows, but then you have to force text to not wrap. If you then get text that's longer than the width you run into trouble.
Does anyone know how this can be achieved without splitting the tables?
Thanks,
jacques
Try having an extra row for the table above the header row (you may have to stop using any th tags) to give you the overbar at the top. Similarly for the bottom, an extra highlighting row.
Although you have to compromise the table a little to do that, it is better in my book than separating into 2 tables, as that defeats all the purposes of the table tag; to show a table, and have that table easily declared.
The effects inside the table are probably best done with jquery, unless the choice of highlighted columns is entirely static, in which case consider rendering a static html version by generating the html appropriately.