Delphinidin

Now that you have seen how to add simple styling and effects to tables, I’m going to show you how to manipulate the data that is in the tables. When I say manipulate, I mean add, remove, and filter the data contained, which results in changes to the DOM. All of the selectors, events, and effects that I have discussed up until now can be applied to tabular data. The possibilities of what you can do are endless. In this section, I explain the following solutions:

+ Adding a row after the first/last rows of the table
+ Adding a row after a row based on index
+ Adding a row after rows with specific content
+ Removing a row using a filter selector
+ Removing a row based on index
+ Removing a row based on its content

- Adding a Message After The First/Last Rows of The Table
Adding content dynamically to a page can be done server-side, which requires a request to the server and, depending on the size of the database that needs to be searched, can take quite a bit of time and processing power. An easier way to dynamically insert content is using jQuery to either add static content stored in a jQuery function or to load content in via Ajax without disrupting other activities on the page. You can specifi cally target areas within the table if you have a search results page and you would like to insert a special message after the first search result. This is similar to the way Google always keeps paid results at the top of every search results page, and all other organic listings follow afterwards. JQuery allows you to do this by using a combination of the :first filter and the after() method.

1. Create a class named special and apply diff erent CSS properties to it so that it stands out after it is added to the table.

.special
{background:#6AAF18;text-align:center;font-size:22px;color:#fff;fontweight:
bold;}

2. Set up a document ready handler and, within it, add a statement that selects the first tr in the table and inserts the special offer row directly after it.

$(document).ready(function() {
$(‘#products tr:first’).after(‘<tr><td colspan=”4” class=”special”>Special
Offer TODAY</td></tr>’);
});

- Removing a Row Using a Filter Selector
I work in an environment where removing content, whether it be temporarily or permanently, can be quite a challenge. We have a schedule of weekly deployments and code that needs to be compiled and tested, which prevents quick changes to most pages on the sites. If we need to do a quick fix such as removing a product, image, text, or any type of element from the DOM, we can use the remove() method, which makes the backend developers happy because they don’t have to get involved. Sometimes, content makes it onto a site when it shouldn’t, after work hours during times of limited support. Being able to quickly go in and remove the content using jQuery really saves the day and allows the developers to fix the issue the next day from the core.

The remove()method removes whatever matched set it is attached to from the DOM. Set up a document ready handler and add a selector statement with remove() method attached at the end. The matched set, in this case, the last table-row, is removed from the DOM.

$(document).ready(function(){
$(‘tr:last’).remove();
});

Read More:
How to Manipulating The Data in Tables with jQuery - Part 2