Seleccionar Columna de una tabla

chabri · #1 (**permalink**) 05/11/2014, 08:36

Buenas amigos, ¿sabeis como puedo hacer para hacer una seleccion de una columna en una tabla con un CheckBox?

Es muy facil hacer una seleccion horizontal, pero me gustaria hacer una vertical. es posible?

Gracias!

diurno10 · #2 (**permalink**) 05/11/2014, 11:28

Código HTML:

<html>
<head>
<title>Ejemplo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<table width="500" border="1" cellspacing="0" cellpadding="4">
  <tr>
   <td>&nbsp;</td>
   <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 type="button" id="firstColumn" value="prmera columna" />
<input type="button" id="secondColumn" value="Second Column" />
<input type="button" id="thirdColumn" value="Third Column" />
<input type="button" id="reset" 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>

</body>
</html>

chabri · #3 (**permalink**) 06/11/2014, 02:36

Muy buenas, he pensado algo como me comentas, pero necesito algo mas global, he creado esto pero no me termina de ir bien:

js:

Cita:

$(".select-column th input").click(function(){
var columnNo = $(this).index();
$(this).closest("table")
.find("tr td:nth-child(" + (columnNo+1) + ")")
.toggleClass('full');
});

HTML:

Cita:

<table class="table table-month selectable">
<thead>
<tr class="select-column">
<th >
<label>
<input type="checkbox" value="opcion_1"> Week
</label>
</th>
<th class="">
<label>
<input type="checkbox" value="opcion_1"> Monday
</label>
</th>
<th>
<label>
<input type="checkbox" value="opcion_1"> Tuesday
</label>
</th>
<th>
<label>
<input type="checkbox" value="opcion_1"> Wednesday
</label>
</th>
<th>
<label>
<input type="checkbox" value="opcion_1"> Thursday
</label>
</th>
<th>
<label>
<input type="checkbox" value="opcion_1"> Friday
</label>
</th>
<th>
<label>
<input type="checkbox" value="opcion_1"> Saturdays
</label>
</th>
<th>
<label>
<input type="checkbox" value="opcion_1"> Sundays
</label>
</th>
</tr>
</thead>
<tbody>

<tr class="select-row">
<th></th>
<td> </td>
<td> </td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>