CODEWITHSUNDEEP
jqueryhtmlcssweb
jordan
jordan

Reputation: 3546

Using JQUERY, how to traverse down from a table element, and style all the TD elements of parent table and sub tables

I have a table, which contains tables, which also contain tables.

I would like to traverse through these tables of tables of tables with JQUERY, and style all of the TD elements to contain the style of 'padding: 0px 5px 0px 0px;'

I assume that the first few statements would be like: 

$('#overAllTableName tbody tr td').each().css('padding', '0px 5px 0px 0px');

Is this going down the right path?

Upvotes: 0

Views: 121

Answers (2)

aoeu256
aoeu256

Reputation: 385

As you probably already know the Firefox or Chrome console by pressing F12, and play around with Jquery commands. Jquery injector can help for web pages that don't already have Jquery: https://chrome.google.com/webstore/detail/jquery-injector/indebdooekgjhkncmgbkeopjebofdoid?hl=ja.

The table itself has cellpadding property that you might want to play with.

If all the tables you want to update are inside the element #overAllTableName then this might do the trick:

$('#overAllTableName td').each(function() {
   $(this).css('padding', '0px 5px 0px 0px');
});

Upvotes: 1

dezman
dezman

Reputation: 19358

You can simply do:

$('td').css({
  padding: '0px 5px 0px 0px'
});

or

$('#parentSelect td').css({
  padding: '0px 5px 0px 0px'
});

These jQuery selectors create an array which contains all of the td's you are looking for, the each is unnecessary.

Upvotes: 2

Related Questions