combine jQuery statements

I'm having a brain dead kind of day and I'm trying to figure out a way to make this smaller and everything I've tried has not worked. I know there has to be a better way to do this so I figured I would ask here.

Any tips on jQuery caching would be great too (I'm trying to make about 225 lines of jQuery as small as possible so anything can help!

$(".tableMap td:nth-child(1)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(2)").css("text-align","center").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(3)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(4)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(5)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(6)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(7)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(8)").attr("style","border-right:1px solid black; border-bott开发者_运维百科om:1px solid black;");
$(".tableMap td:nth-child(9)").css("text-align","center").attr("style","border-bottom:1px solid black;");

Sorry for my horrendous code, feel free to give me any tips you can think of!

Jeff

Just apply a CSS class with your border styles to all of the cells (no jquery needed at all for that):

<style>
  .tableMap td
  {
    border: 1px solid black;
    border-left: none;
    border-top: none;
  }
</style>

Then, afterwards, you can apply your specific styles just to the two items that are needed:

$(".tableMap td:nth-child(2)").css("text-align","center");
$(".tableMap td:nth-child(9)").css("text-align","center").attr("style","border-right:none;");

A good thing to remember is to only use javascript/jQuery when you need it. Use straight up HTML/CSS whenever you can, your site will perform much better that way.

untested - but i tjink you can see what i am getting at...

$(".tableMap td:nth-child(1)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td").children().lt(9).gt(1).attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(9)").css("text-align","center").attr("style","border-bottom:1px solid black;");

it looks like if you do

$(".tableMap td").attr("style","border-right:1px solid black; border-bottom:1px solid black;");

then

$(".tableMap td:nth-child(2),.tableMap td:last").css("text-align","center");

it would be much simpler