smartcoderszone – A Blog about Web Development Tutorials and Tips, PHP, Mysql, Javascript, CSS, Jquery, SEO, Twitter and Facebook Scripts

Hi Guys,

In the previous post we have learned that how to add background color of table row using jquery. Today I am posting jquery commands for adding border to any table row by using jquery simple statements.

To add border to your table row, we need to use jquery css property. One thing is noticeable is that when we want to add border around table row then we have to use content(td) function for applying border to each table data. This function is must and without it border property for table row won’t work.

$('#special_list').contents('td').css({'border': '1px solid #aaaaaa'});

Here #special_list is the id of the table row (
). Above command simply add border around whole table row.

Now if we want only top and bottom border, then we have to remove border of left and right side.

$('#special_list').contents('td').css({'border': '1px solid #aaaaaa', 'border-left': 'none', 'border-right': 'none'});

If you dont want any border around it then.

$('#special_list').contents('td').css({'border': 'none'});

You can specify which side border you want. Like this -

$('#special_list').contents('td').css({'border-left': '1px solid #aaaaaa'});

If you want border around any div then –

$('#special_list').css({'border-left': '1px solid #aaaaaa'});

Here #special_list is the id of that div.

We can change the background color of any div –

$('#special_list').css('background-color', '#cccccc');

Hope these jquery commands help you to solve your problem. More jquery stuff comming soon.