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?
AlariusAsked:
Who is Participating?
 
chuckaliciousConnect With a Mentor Commented:
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:

$(<whatever_element_is_relevant>).each(function(){
  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.
0
 
chuckaliciousCommented:
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

0
 
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:
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.
0
 
AlariusAuthor Commented:
This puts me on the right path... thanks!
0
All Courses

From novice to tech pro — start learning today.