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();