views:

745

answers:

1
+1  A: 

Couple of questions/ideas:

It seems this technique is being used for UI/richness, meaning that the sub-rows aren't calculated when the user hovers nor does it get created from an ajax call, etc. But you aren't hiding and unhiding the data, but instead creating it on hover and then removing it afterward. This is potentially very inaccessible and adds extra overhead to the browser-script.

So I'd suggest having the table load with the actual sub-rows and having your jquery hide them during load. You could simply add a class like "sub_row" to those tables.

Second, is this only happening in Safari? Is it happening in Firefox? Either way, I would guess you are losing a pixel from the browser adding a default border. I don't know why this would keep adding that border on each slideup, but I'm sure someone else here can spot that.

Lastly, I'm unfamiliar with your selector syntax. you are selecting your tds and trs as :

  $('<tr />)

and $(')

instead of:

  $('tr')

and

  $('td')

Any reason why?

Anthony
I agree on all points made in the first paragraph. If this stuff is actually used then the sub rows will just be in HTML and not created each time. The only reason they're being created now is because I was too lazy to go through and add another row to each row that's there. Yes this only happens in Safari. The default border is probably the culprit, i didn't even think of that. Thanks.var elem = $('<tr />') doesn't select a TR, it creates it. Thanks for the answer, I'll check on the border thing. I mostly just posted this to satisfy my curiosity as to what could be causing that.
Electronic Zebra
Also, just for the sake of conversation, I didn't add the rows to the HTML itself because I wasn't certain about how dataTables would handle rows with display:none when it does it's sorting. I think it should handle them fine, but I just didn't want another variable that might effect the behavior at the time, until I had a chance to test that.
Electronic Zebra
You could add the sub-rows into the HTML and then have the jQuery do some kind of check to see if the @media is aural (not sure how to do that), and if not, go through and grab the sub-row and put into an array tied to the parent row's id, THEN destroy it, and always re-add it from that array. That maybe ridiculous though. Glad I could help. Safari and borders will make your life miserable, just a heads up.
Anthony