asked on

Add table rows based on data.

I have a table that has data as such:

Charge Description Notes Cost
--------------------------------------------
Sorting
Rework
inspection
Shipping
Admin Fee

I need to be able to render this table based on whether there is a cost value for each item. So if there is no Sorting cost, then the row Sorting will not show up, etc.

I was wondering if there is a way to use Javascript/Jquery to dynamically render the table based on the data available?

chuckalicious

You can certainly use jQuery to do this.

If you give your sorting cost cell/td a class, say "sort_cost", you could do something like:

$(".sort_cost").each(function() {
  if ($(this).html()=="") { $(this).parent().hide()}
});

Basically this will work through each element with a class of .sort_cost and checking if it has a value. If it doesn't, it hides the parent, which in this case, I think would be the tr.

Open in new window

Alarius

ASKER

Thanks for the quick reply;
I should elaborate a little further. I get the data for the costs from a sharepoint list. The objective is to present a printable form for the user. Rather than design the form to always show the cost rows, I was trying to build the table based on what values were collected.

The data is stored in an object 'spobj'; so I would have:
spobj.SortingCost
spobj.ReworkCost
spobj.InspectCost
spobj.ShipCost
spobj.AdminFee

What I want to do is:
If spobj.SortingCost != 0 then add a row to the table and populate.
So it would have to then create a new TR, as well as the TDs for each column.

The reason I want to try and create the table dynamically is so that if someone adds cost categories in the future, I won't need to tamper with the actual HTML, just modify the code a little.

ASKER CERTIFIED SOLUTION

chuckalicious

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Alarius

ASKER

This puts me on the right path... thanks!