7 replies [Last post]
engchiang
engchiang's picture
Offline
newbie
Malaysia
Last seen: 6 years 35 weeks ago
Malaysia
Timezone: GMT+8
Joined: 2014-02-07
Posts: 4
Points: 5

Hi! I am a Chinese from Malaysia, I have been use google and yahoo to search for css and html answer few weeks already , but because of i am study mechanical engineering , have no coding basic at all , so until now i still cannot solve my problem.

Everyday I have to copy and paste all data from a webpage's tables into Excel; there are more than 100 tables, each table contains 10 rows, each row is a link. When I click on it, it will expand and shown its content, but when I click on the 2nd row , the 1st row content will hide automatically, and when I click on the 3rd row, the 2nd row and other content also will hide automatically...

So I need to click the row 1 by 1 in order to show its contents and copy paste into excel, which is tedious and time consuming.

I have ask my boss for permission to log in and share his table data , this is my extra job i need work for him.

this url http://jsfiddle.net/engchiang/ghP2a/5/ , where its output result is when i open the website , the contents of 10 rows are all hidden.
The upper left corner is source code , the lower right corner is output result. this table consists of 10 rows , each of its 1st cell is link ,

this url http://jsfiddle.net/engchiang/ghP2a/6/ , where its output result is when i click on the 1st cell in 1st row , and the 1st row HTML will show as: tr class="shown" , the other 9 rows HTML will show as: tr class="hidden"

this url http://jsfiddle.net/engchiang/ghP2a/7/ , where its output result is when i click on the 2nd cell in 1st row , and the HTML of the 2nd row will show as: tr class="shown" , but the HTML of the 1st row will change to: tr class="hidden" disabled="true"

then when i click on 1st cell in 3rd row , it show the 3rd row contents and hide the other row contents...

Is there any method that will cause the webpage expand all its tree contents when I open the webpage, or cause the link to not hide its contents automatically when I click on the other link?

I have a google chrome custom css file, which is put in C:\Users\User\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\
can you provide me a code which can be put into my custom css? if you can solve my problem then i will no need to be work for my boss extra 1,2 hours everyday.
Thank You!!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi engchiang, You must have

Hi engchiang,

You must have some JavaScript manipulating the classes.
To show them all you could disable the javascript and change the class of all TR's to "shown"

engchiang
engchiang's picture
Offline
newbie
Malaysia
Last seen: 6 years 35 weeks ago
Malaysia
Timezone: GMT+8
Joined: 2014-02-07
Posts: 4
Points: 5

hi Tony , i have no coding

hi Tony , i have no coding basic at all , how to manipulating the classes? how to disable the javascript and change the class of all TR's to "shown" ? i am using google chrome.

engchiang
engchiang's picture
Offline
newbie
Malaysia
Last seen: 6 years 35 weeks ago
Malaysia
Timezone: GMT+8
Joined: 2014-02-07
Posts: 4
Points: 5

somebody please help me, i

somebody please help me, i need to work for my boss extra 1,2 hours everyday and cannot be claim.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Is this a site available to

Is this a site available to others on the net?
Can you link to or provide the actual working site I would need the JavaScript and CSS to work this out.
Otherwise you could try:

 
TR.hidden{
  display:table-row !important;
}

engchiang
engchiang's picture
Offline
newbie
Malaysia
Last seen: 6 years 35 weeks ago
Malaysia
Timezone: GMT+8
Joined: 2014-02-07
Posts: 4
Points: 5

hi Tony, thanks for your

hi Tony, thanks for your help, i have put your code into my CSS file, but the table row is just became large , still cannot show its contents , i have shared this two pictures , the 1st is before using your CSS , the 2nd is after using your CSS :
https://www.dropbox.com/s/q3upxqnma8hmlew/001a.jpg
https://www.dropbox.com/s/0qh4anmeczg4b3y/001b.jpg

this site require my boss password, i dont have permission and the password, my boss just save this file as html file and shared, here is:
https://www.dropbox.com/sh/nvu5nnybywaqute/obJC4upkad

Thank you!

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 11 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

The best way to expand all

The best way to expand all tables is probably by using some javascript coding to the page which will add a button to expand all tables or close all tables.

This is the JavaScript you have to add to your page:

$.fn.expandAll = function() {
    $(this).find("tr").removeClass("collapsed").addClass("expanded").each(function(){
        $(this).expand();
    });
};

And this line you need to use the JavaScript made above:
$(".treeTable").expandAll();

The last code will create a button to expand all tr's.
As you can read it will search for all "tr" tables and changes the collapsed command to expanded command.
Let us know if this worked out for you.

Check Maximum Webdesign for your online solutions

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 11 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

If this is not working then I

If this is not working then I request you to open the file input_v81.css and find the line containing:
border-collapse:collapse

Change the last collapse word with the following possibilities:
- separate
- initial
- inherit

Let us know if it worked out, if this still is not working then I also suggest you to take a look into the other css files and search for the word collapse (this is excactly what you do NOT want).

Cheers Helldog

Check Maximum Webdesign for your online solutions