Hide a row in a table and display it again?

Question

I use a foreach loop inside ASP.NET MVC View page. For each element of the collection that foreach operates on I create two rows - one for display, one for edit. I want to hide the edit row and only display it later depending on user action.

If I hide the edit rows with display: none, then jQuery's show() method cannot redisplay it again - it doesn't work. If I hide it like this

// I put this inside the foreach loop
<script type="text/javascript">
$("#edititem_" + <%: item.Id %>).hide();
</script>

jQuery's show() function can display it later but the page does not validate because this is inside <tbody> tag (this is where I enumerate my collection and create <tr>'s)

I want to be able to show/hide edit rows on demand and still have a XHTML valid page.

How can I achieve that?

Answer 1

use a CSS file and add a Class to the edit-row and another class to the showing row.

if you write

.editRows {
  display:none;
}

in the CSS file, the .show() of jquery works.

or you could do

$(".editRows").hide();

Answer 2

To have graceful degredation as well, you could stick with the hiding done via jQuery, just give the edit <tr> rows a class, e.g. <tr class="edit"> then hide all of those at once with jQuery outside the table, like this:

<script type="text/javascript">
  $(function() {
    $("tr.edit").hide();
  });
</script>

This approach, instead of hiding them off the bat with CSS is more friendly to those with JS disabled, if you might have an audience of users like that, go with this .hide() approach.