Using JQuery to remove blank rows from HTML Tables

Question

I have an HTML table:

<table id="indicationResults" class="resultsGrid" cellpadding="2" cellspacing="0" >

Some of the cells in the table only contain strings depending on specific permissions. For example, here is one row that only puts a label and data in each cell if the user has a specific permission:

<tr>
    <td id="DV01Label" class="resultsCell">
        <%= CustomHelpers.StringWithPermission("DV01", new string[] { PERMISSIONS.hasALM })%>
    </td>
    <td id="DV01Value" class="alignRight">
        <%= CustomHelpers.StringWithPermission(Model.Results.DV01.ToString(Chatham.Web.Data.Constants.Format.CurrencyCentsIncludedFormatString), new string[] { PERMISSIONS.hasALM })%>
    </td>
    <td id="DV01Fixed" class="alignRight">
        <%= CustomHelpers.StringWithPermission(Model.Results.FixedComponent().DV01.ToString(Chatham.Web.Data.Constants.Format.CurrencyCentsIncludedFormatString), new string[] {PERMISSIONS.hasALM})%>
    </td>
    <td id="DV01Floating" class="alignRight">
        <%= CustomHelpers.StringWithPermission(Model.Results.FloatingComponent().DV01.ToString(Chatham.Web.Data.Constants.Format.CurrencyCentsIncludedFormatString), new string[] { PERMISSIONS.hasALM })%>
    </td>
</tr>

How do I go back through and delete and all completely empty rows in this SPECIFIC table after the page loads using JQuery, so instead of seeing a tiny little empty row, it's just not there.

David Tang · Accepted Answer · 2011-01-21 15:36:03Z

11

With jQuery:

$('#indicationResults tr').each(function () {
     if (!$.trim($(this).text())) $(this).remove();
});

Although it would be much better if you could modify your asp to only output rows when the user has the right permissions ;)

answered Jan 21, 2011 at 15:36

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nik0lai Over a year ago

Treat the problem, before the cure as they say :)

JasCav Over a year ago

+1 for the comment on fixing the problem server-side. This should not be a JavaScript solution.

slandau Over a year ago

That modification will happen if it kills me, lol. Gotta way until next sprint though =/

Darin Dimitrov · Accepted Answer · 2011-01-21 15:45:39Z

You should write a proper HTML helper. Contrary to web forms, MVC gives you full control over the generated HTML and is totally inexcusable to use javascript to fix broken HTML.

So:

public static MvcHtmlString RowWithPermission(
    this HtmlHelper htmlHelper, 
    string cssClass, 
    string id, 
    string value, 
    string[] permissions
)
{
    if (HasPermissions(permissions))
    {
        var td = new TagBuilder("td");
        td.AddCssClass(cssClass);
        td.GenerateId(id);
        td.InnerHtml = value;
        return MvcHtmlString.Create(td.ToString());
    }
    return MvcHtmlString.Empty;
}

and then:

<tr>
    <%= Html.RowWithPermission("resultsCell", "DV01Label", "DV01", new string[] { PERMISSIONS.hasALM }) %>
    <%= Html.RowWithPermission("alignRight", "DV01Value", Model.Results.DV01.ToString(Chatham.Web.Data.Constants.Format.CurrencyCentsIncludedFormatString), new string[] { PERMISSIONS.hasALM }) %>
    ...
</tr>

Collectives™ on Stack Overflow

Using JQuery to remove blank rows from HTML Tables

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related