How to change width of td inside another td with Jquery/css?

Question

I want the TD's width that is in another TD to be affected when I click the button, here is the html:

<button id="button">Click me</button>

<table class="counter">

<tr>
<td>1<td>1</td></td>
<td>2<td>2</td></td>
<td>3<td>3</td></td>
<td>4<td>4</td></td>
</tr>

<tr>
<td>5<td>5</td></td>
<td>6<td>6</td></td>
<td>7<td>7</td></td>
<td>8<td>8</td></td>
</tr>

<tr>
<td>9<td>9</td></td>
<td>10<td>10</td></td>
<td>11<td>11</td></td>
<td>12<td>12</td></td>
</tr>

<tr>
<td>13<td>13</td></td>
<td>14<td>14</td></td>
<td>15<td>15</td></td>
<td>16<td>16</td></td>
</tr>

</table>

And this is the Jquery:

    $("#button").click(function() {
 $(".counter").find("tr td:nth-child(2)").css('background', 'blue', 'width', '30px')
 $(".counter").find("tr td:nth-child(4)").css('background', 'blue', 'width', '30px')
 $(".counter").find("tr td:nth-child(6)").css('background', 'blue', 'width', '30px')
 $(".counter").find("tr td:nth-child(8)").css('background', 'blue', 'width', '30px');

});

The background change is working but not the change of width, can someone tell me why and provide a solution? Thanks.

Answer 1

You have to pass the css rule as a JSON when it exceeds more than one styling rule.

Just use,

  .css({'background' : 'blue' , 'width' : '30px'});