Hide a table row (<tr></tr>) with Javascript messes up html-table layout in Chrome browser...
Hi there.
I use a Jacascript to toggle some table-rows visible/invisible. However... when they become visible, they doesn't look the way they should. Here's an example of a row:
I use a script like this:
The entire table has got 4 columns. Some rows less with merged cells (colspan="2").
But after toggling the row visible, it is as if the 4 cells are squeezed together to 2.
I have the impression that the Javascript/CSS ruins the table-setup i Chrome. Everything looks fine i Explorer 11 and Edge.
Any ideas how to handle this?
Best regards
Ulrich
I use a Jacascript to toggle some table-rows visible/invisible. However... when they become visible, they doesn't look the way they should. Here's an example of a row:
<tr valign="baseline" id="adjuvant_1" style="display:none">
<td align="right" nowrap="nowrap" bgcolor="#99CC99">Pt´s wish not to receive adjuvant therapy:</td>
<td align="right" bgcolor="#99CC99"><input type="checkbox" name="adj_adjuvant_risk_tox" value="1" /></td>
<td bgcolor="#99CC99">Too high risk for toxicity compared to potential benefit </td>
<td bgcolor="#99CC99"> </td>
</tr>I use a script like this:
function Check_adjuvant_up() {
var v = document.getElementById('adj_adjuvant_therapy_choice_up').value;
if (v == "No") {
document.getElementById('adjuvant_1_up').style.display = 'block';
}
else {
document.getElementById('adjuvant_1_up').style.display = 'none';
}
}The entire table has got 4 columns. Some rows less with merged cells (colspan="2").
But after toggling the row visible, it is as if the 4 cells are squeezed together to 2.
I have the impression that the Javascript/CSS ruins the table-setup i Chrome. Everything looks fine i Explorer 11 and Edge.
Any ideas how to handle this?
Best regards
Ulrich
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
how's the whole table looks like? can you share some HTML here?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi everyone.
Thank you so much for your responses. I appreciate the fast responses a lot!
skullnobrains: table-row made no difference.
To all: _up on some variables was a typo. I have a lot of these, and some for an update-form is named the same just with the _up. Sorry for the confusion. :-)
Michel Plungjan: Yup. That made the difference! :-)))) Awesome!
Julian Hansen: As mentioned... I made a typo in the original post. Sorry. But the table-row didn't make a difference to Chrome.
Thank you all for your contributions. :-))
Best regards
Ulrich
Thank you so much for your responses. I appreciate the fast responses a lot!
skullnobrains: table-row made no difference.
To all: _up on some variables was a typo. I have a lot of these, and some for an update-form is named the same just with the _up. Sorry for the confusion. :-)
Michel Plungjan: Yup. That made the difference! :-)))) Awesome!
Julian Hansen: As mentioned... I made a typo in the original post. Sorry. But the table-row didn't make a difference to Chrome.
Thank you all for your contributions. :-))
Best regards
Ulrich
ASKER
Thanks again. :-)
good to see you got it running. feel free to post the corrected typo and accept your own post.
Julian Hansen: As mentioned... I made a typo in the original post. Sorry. But the table-row didn't make a difference to Chrome.I disagree. I have tested my code in all browsers and it works fine. If it is not working on your side then that is implementation specific and you need to post your code (or give us a link to look at) so we can see where it is going wrong.
Switching your <tr> from display: none to display: table-row will restore the row - unless you are doing something else to break it.
ASKER
Dear everyone.
My apology for an wrong/insufficient conclusion earlier. The "table-row" in stead of "block" did work as well as Julians example showed so well. Skullnobrains link also explains all well.
My apology again and I will re-evaluate the question.
Thank you Julian for bringing it up. :-)
Best regards
Ulrich
My apology for an wrong/insufficient conclusion earlier. The "table-row" in stead of "block" did work as well as Julians example showed so well. Skullnobrains link also explains all well.
My apology again and I will re-evaluate the question.
Thank you Julian for bringing it up. :-)
Best regards
Ulrich
Awesome - glad you got it working.
I hope you will still consider my solution as the most elegant and pragmatic: To toggle the hide class rather than switch between styles
ASKER
For sure I will, Michel. :-)
ASKER
By the way... stay tuned for a new question closely related to this one... You guys will for sure have the answer. ;-)
Will post a little later...
Will post a little later...
Clarification on my challenge.
The original answer seemed to imply that the process of switching between display: none and display: table-row would not work - which is incorrect. Anyone reading this thread might get the impression that such a method is not a viable solution - hence my challenge.
As to which method is better - a class switch or a style switch - this is debatable and would vary on a case by case basis.
The original answer seemed to imply that the process of switching between display: none and display: table-row would not work - which is incorrect. Anyone reading this thread might get the impression that such a method is not a viable solution - hence my challenge.
As to which method is better - a class switch or a style switch - this is debatable and would vary on a case by case basis.
ASKER
Hey guys.
Here's my new question:
https://www.experts-exchange.com/questions/29181256/Hide-show-table-rows-tr-tr-with-Javascript-is-acting-up.html#questionAdd
Best regards
Ulrich
Here's my new question:
https://www.experts-exchange.com/questions/29181256/Hide-show-table-rows-tr-tr-with-Javascript-is-acting-up.html#questionAdd
Best regards
Ulrich
ASKER
Can you please give me a little example on display table-row? :-)
best regards
Ulrich