Add table rows based on data.

I have a table that has data as such:

Charge Description    Notes      Cost
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?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

AlariusAuthor Commented:
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:

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.
Sorry, misunderstood - I thought you wanted to remove rows, not create them - I have man flu :)

I'm not familiar with sharepoint or how it delivers it's content, so maybe you could post some page source with an example of the content you want to work through.

The basic idea is still the same though:

  if (!($(this).val())=="")) {
    //add a table row
   $('#myTable tr:last').after('<tr><td>content</td></tr>');

This adds a new row after the last existing row in the table with ID myTable.

So all you really need to know is what element/class/id to use to identify the relevant part of the sharepoint data.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AlariusAuthor Commented:
This puts me on the right path... thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.