Skip navigation

Tag Archives: Tutorial

Select a column of a table using jQuery


Add this into your head section

<script type="text/javascript" src="includes/jquery-1.3.2.min.js"></script>

Add this into your body section

<table width="500" border="1" cellspacing="0" cellpadding="4">
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>
<input value="First Column" />
<input id="secondColumn" value="Second Column" />
<input value="Third Column" />
<input value="Reset" />
</p>
<script>
$(function(){
  // Change first column background color.
  $("#firstColumn").click(function(){
  $("table tr td:first-child").css("background-color","#ff0000");
});
// Change second column background color.
$("#secondColumn").click(function(){
  $("table tr td:nth-child(2)").css("background-color","#ff0000");
});
// Change third column background color.
$("#thirdColumn").click(function(){
  $("table tr td:last-child").css("background-color","#ff0000");
});
// reset background color.
$("#reset").click(function(){
  $("table tr td").css("background-color","transparent");
});
})
</script>